Обмежити кількість елементів у сортуванні (з draggable як джерелом)? - jquery, jquery-ui-сортує, jquery-ui-draggable

У мене є перетягування, підключене через connectToSortable до багаторазовий сортування. Я хочу обмежити кількість елементів, які можна помістити в кожну сортувальну. Я можу це зробити, коли ви перетягуєте з іншого сортувального, але не коли ви перетягуєте з перетягуваного до сортувального. Простий приклад (як JSBin):

$( ".sortable" ).sortable({
connectWith: ".sortable"
});

$( ".sortable" ).bind( "sortreceive", function(event, ui) {
// This will not work because the sender is a draggable, which has no "cancel" method
if ( 4 < $( this ).sortable( "toArray" ).length ) {
$(ui.sender).sortable("cancel");
}
});

$( "#draggable li" ).draggable({
connectToSortable: ".sortable",
helper: "clone"
});

Спочатку я спробував $(ui.sender).sortable("cancel"); в sortreceive подія, а тому, що відправник є draggable, не інший sortable, вона не має cancel метод і це не працює (так ці і ці питання, схоже, не вирішують мою проблему) логіка, що склеює перетягування і сортується разом, але я не бачу місця, щоб стрибати і скасувати "підроблені" зупинки.

Було б здорово, якби існувала якась візуальна зворотній зв'язок, як курсор миші змінюється на no-drop, та / або зміна кольору фону на сортуванні.

Контекст: це спроба відповісти Обмежте кількість віджетів у бічних панелях на біржі стеку WordPress. Сторінка адміністрування віджетів WordPress має контейнер з усіма доступними віджетами, створеними як перетягується, підключений до різних сортуючих контейнерів для кожної бічної панелі. Я не хочу змінювати основний код, просто розширте його за допомогою мінімального коду, щоб уникнути скидання іншого віджета на "повну" бічну панель.

Відповіді:

Просто додайте пункт if, щоб перевірити кількість елементів у сортувальному і роз'єднати подію draggable, коли u досягли цього числа.

РЕДАГУВАТИ: (наразі включає підтримку декількох списків)

$(".draggable").draggable({revert:true,helper:"clone",connectToSortable: ".sortable"});

$(".sortable").sortable({
connectWith:".sortable",
receive: function(ui) {
if($(this).children().length >=6) {
$(this).children().addClass("filled");
$(this).addClass("dontDrop");
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}else {
$(this).children().removeClass("filled");
}
add_delete();
}
});
function add_delete() {
$(".delete").remove();
$(".sortable>li").append("<span class="delete">--</span>");
$(".delete").unbind("click").click(function(){
if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable
$(this).parent().parent().children().removeClass("filled");
$(this).parent().parent().removeClass("dontDrop");
console.log($(".sortable").not(".dontDrop"));
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}
$(this).parent().hide("slow").remove();
});
}
add_delete();

Перевірте скрипку тут JSFiddle

Так що я використовував тут: Можна передати не тільки селектори, але й самі елементи до параметрів connectWith / connectToSortable. Всякий раз, коли "ul" має 6 елементів, я даю йому клас "dontDrop" і, отже, виключається з з'єднань. Сподіваюся, що це очистить вас.

Нехай ця щедрість прийде таким чином: D

Можна деактивувати з'єднання, коли виконується умова:

$("#sortable").bind( "sortreceive", function(event, ui) {
if ($( "#sortable li" ).length > 3){
$( "#draggable li" ).draggable( "option", "connectToSortable", false );
}
});

Скрипка тут: http://jsfiddle.net/ZLCDr/1/