Ограничить количество элементов в сортируемом (с возможностью перетаскивания в качестве источника)?

Question

У меня есть перетаскиваемый объект, который подключен через 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 Stack Exchange.Страница администрирования виджетов WordPress имеет контейнер со всеми доступными виджетами, настроенными как перетаскиваемые, подключенные к различным сортируемым контейнерам для каждой боковой панели.Я не хочу изменять базовый код , просто добавьте в него как можно меньше кода, чтобы предотвратить падение другого виджета на «полную» боковую панель.

Answer 1

Вы можете деактивировать соединение при выполнении условия:

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

Fiddle здесь: http://jsfiddle.net/ZLCDr/1/

Answer 2

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

РЕДАКТИРОВАТЬ: (теперь включает поддержку нескольких списков)

$('.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