jQuery Sortable - ограничение количества элементов в списке

Question

У меня есть таблица расписания, которую я использую для редактирования jQuery Sortable.

Каждый день - UL, а каждое событие - LI.

Мой JQuery:

    $("#colSun, #colMon, #colTue, #colWed, #colThu").sortable({
         connectWith: '.timePieces',
         items: 'li:not(.lith)'
    }).disableSelection();

Чтобы сделать все LI сортируемыми, кроме тех, которые имеют класс "lith" (названия дней). Пользователь может перетаскивать событие изо дня в день или добавлять новые события, нажимая кнопку, которая добавляет новое перетаскиваемое событие (LI) в первый UL (воскресенье).

Я хочу, чтобы каждый день принимал только до 10 событий. Как мне это сделать?

Заранее спасибо!

Answer 1

• ДЕМО: http://so.lucafilosofi.com/jquery-sortable-limit-number-of-items-in-list

$(function() {
    $(".sortables").sortable({
        connectWith: '.connectedSortable',
        //receive: This event is triggered when a
        //connected sortable list has received an item from another list.
        receive: function(event, ui) {
            // so if > 10
            if ($(this).children().length > 10) {
                //ui.sender: will cancel the change.
                //Useful in the 'receive' callback.
                $(ui.sender).sortable('cancel');
            }
        }
    }).disableSelection();
});

Answer 2

Чтобы функция запускалась каждый раз, когда вы пытаетесь перетащить новый элемент в определенный список (динамически), вам нужно использовать on() вместо receive: метода.

http://jqueryui.com/demos/sortable/#event-receive

$(function() {
    $( "#day1, #day2" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();

    $( "#day1" ).on( "sortreceive", function(event, ui) {
        if($("#day1 li").length > 10){
            $(ui.sender).sortable('cancel');
        }
    });

});