Яваскрипт - Droppable и Sortable (JQuery + UI )

Из-за недостаточного знания JQ я наплодил много избыточного кода, а это не хорошо, полагаю специалисты могут сделать лучше..

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

Задача:

Необходимо написать плагин (обертку) для работы моего модуля перетаскивания блоков (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:

:{if $array.blocks|@count}:

:{foreach key=key item=item from=$array.blocks}:

:{$item.title}:

 

 

:{/foreach}:

:{/if}:

Исходный CSS:

/* Блоки */

#wlBlocksList,#wlBlocks ol{/*height:350px;*/ margin:0; padding:0; /*border:1px solid;*/}

#wlBlocksList li{display:inline-table; height:18px; margin:2px; padding:1px; cursor:move; border:2px solid green;}

#wlBlocksList li h4,#wlBlocks li h4{/*float:left;*/ min-height:18px; /*min-width:80px;*/ /*margin-right:10px;*/ /*cursor:move;*/}

#wlBlocksList li span{display:none;}

#wlBlocks .wlBl{display:none; /*width:100px;*/ min-height:120px; margin:0; padding:0; /*position:relative;*/ border:1px dotted red;}

* html #wlBlocks .wlBl{height:200px;}

#wlBlocks .wlBl.on{display:block;}

#wlBlocks .wlBl-highlight{color:#363636; border:1px solid #FED22F; background:#FFE45C url("../images/blocks-highlight.png") repeat-x scroll 50% top;}

#wlBlocks .wlBl-hover{border:1px solid green; color:#C77405; font-weight:bold;}

/*#wlBlocks ol{margin:0; padding:0;}*/

#wlBlocks li{/*display:inline-table;*/display:block; min-height:18px; margin:2px; padding:1px; overflow:hidden; cursor:auto; border:1px solid green;}

#wlBlocks li h4{float:left; /*display:inline-table;*/ /*width:100%;*/ /*margin-left:10px;*/ /*margin-right:40px;*/ /*cursor:move;*/}

#wlBlocks li span{float:right; display:block; /*display:inline-table;*/}

#wlBlocks li .del{background-position:-176px -96px; /*margin-left:-20px;*/}

#wlBlocks li .options{background-position:-192px -112px; /*margin-left:-40px;*/}

#wlBlt.wlBl,#wlBlt2.wlBl,#wlBlb.wlBl,#wlBlb2.wlBl{/*width:70%;*/ min-height:25px; margin:5px auto 5px;}

* html #wlBlt.wlBl,* html #wlBlt.wlBl,* html #wlBlt.wlBl,* html #wlBlt.wlBl{height:25px;}

/* Трехколоночный макет */

#wlBlocks .wlBlw{float:left; width:100%; /*border:1px solid;*/}

#wlBlocks .wlBlw2{/*width:400px;*/ margin:0 210px 0 210px; /*border:1px solid;*/}

#wlBll.wlBl,#wlBlr.wlBl{float:left; width:200px; min-height:200px; margin-left:-100%;}

#wlBlr.wlBl{margin-left:-205px;}

Исходный JS:

$(function() {

var $list = $('#wlBlocksList'), $bt = $('#wlBlt'), $bl = $('#wlBll'), $bc = $('#wlBlc'), $br = $('#wlBlr'), $bb = $('#wlBlb');

if ($('li',$list).length) {

$('li',$list).draggable({

//cancel: "a.ui-icon", // clicking an icon won't initiate dragging

revert: "invalid", // when not dropped, the item will revert back to its initial position

//containment: $( "#wlBlocks" ).length ? "#wlBlocks" : "document", // stick to demo-frame if present

helper: "clone",

//appendTo: "body",

//cursor: "move"

});

$('li',$bl).draggable({

//cancel: "a.ui-icon", // clicking an icon won't initiate dragging

revert: "invalid", // when not dropped, the item will revert back to its initial position

//containment: $( "#wlBlocks" ).length ? "#wlBlocks" : "document", // stick to demo-frame if present

helper: "clone",

//appendTo: "body",

//cursor: "move"

});

$bl.droppable({

activeClass: "wlBl-highlight",

hoverClass: "wlBl-hover",

accept: '#wlBlocksList li.left',

drop: function(event,ui){

var $list = $( "ol", $bl ).length ? $( "ol", $bl ) : $( "

" ).appendTo( $bl );

ui.draggable.find( "a.close" ).show();

//ui.draggable.appendTo($list).fadeIn('fast',function(){});

ui.draggable.appendTo($list);

}

});

}

});