Javascript / JQuery – двигать блоки

За пару часов разобрался, но из-за недостаточного знания JQ - наплодил избыточный код и немного запутался с объединением Droppable и Sortable.

Полагаю, специалисты могут сделать лучше!

Не забудьте указать стоимость и сроки.

Задача:

Необходимо написать плагин (обертку) для работы моего модуля перетаскивания блоков (Droppable) и прикрутить к нужным контейнерам сортировку (Sortable).

Это все давно написано на JQ и выложено на их сайте, нужно просто собрать правильный код и чуть-чуть подточить под мои нужды.

Перетаскивание / Droppable :

Например: http://jqueryui.com/demos/droppable/#photo-manager

Есть список блоков, которые можно использовать на странице сайта (в WP есть что то подобное для настройки боковых блоков в меню), в моем случае это простой:

• Модуль 1
...
• Модуль N

(рисунок "blocks_01.jpg")

Есть контейнеры, куда эти блоки можно перетаскивать, а также блоки можно перетаскивать между контейнерами.

(рисунок "blocks_01.jpg")

У каждого блока есть параметр, определяющий направление (название контейнера): sdTop, sdLeft, sdCenter, sdRight, sdBottom.

Эти же параметры используются и в классах (я например использовал для этого параметр класса в тегах) контейнеров.

Поэтому каждый блок, может быть перетащен только в контейнеры, которые позволяют его принять (accept).

Контейнеры я думал определить бордюр: 1px dotted red для удобства.

При начале перетаскивания блока надо назначать контейнеру (activeClass), где будет другой бордюр и фон, например: border:1px solid #FED22F; background:#FFE45C url("../images/blocks-highlight.png") repeat-x scroll 50% top;

(рисунок "blocks_02-highlight.jpg")

При перетаскивании, когда блок находится над контейнером (hoverClass), надо назначать другой стиль: border:1px solid green;

(рисунок "blocks_03-hover.jpg")

После удачного перетаскивания (в контейнер который может принять этот блок), в момент отпускания мыши, блок должен исчезать из места где он был и появится в месте назначения, при этом должны появится кнопки которые до этого были скрыты (стиль кнопок - любой, я верстку сделаю сам).

(рисунок "blocks_04.jpg")

У некоторых блоков есть параметр `static`, тогда блок должен появляться в месте назначения, но НЕ ДОЛЖЕН ИСЧЕЗАТЬ из места где он был.

У некоторых блоков есть параметр `showParams`, тогда после того как блок появился в месте назначения, должно появится окно для ввода параметров (я сделаю сам, пока просто вставьте заглушку Alert("Введите параметры") ).

Некоторые блоки будут сразу записываться в контейнеры через PHP и будут иметь параметр `allwaysIsset=sdCenter` или `allwaysIsset=....` (определение контейнера), т.е. никакие перемещения не должны удалять эти блоки из контейнеров в которых они находятся.

Блоки можно перетащить в самый исходный контейнер или в любой другой доступный.

Также блоки можно удалить в самый исходный контейнер, нажав на одну из кнопок (корзинка на скрине).

Другая кнопка должна вызывать окно для ввода параметров (я сделаю сам, пока просто вставьте заглушку Alert("Введите параметры") ).

Блоки, попадая в контейнеры обозначенные красным пунктиром можно передвигать между собой, т.е. сортировка описанная ниже.

Сортировка / Sortable :

Например: http://jqueryui.com/demos/sortable/#placeholder

По сортировке все просто - блоки можно передвигать между собой и перетащить в другой контейнер.

У некоторых блоков есть параметры `sortAllwaysTop` или `sortAllwaysBottom`, т.е. независимо от сортировки этот блок должен быть всегда вверху/внизу.

Исходный HTML, CSS и JS - во вложении