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

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

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

Мой jQuery:

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

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

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


jquery limit jquery-ui jquery-ui-sortable
person Adam Tal    schedule 13.03.2010    source источник

Ответы (2)


arrow_upward
30
arrow_downward 

$(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();
});
person Luca Filosofi    schedule 13.03.2010
comment
Это здорово, спасибо! Одна крошечная проблема - он не считает элементы, добавляемые динамически - т.е. он подсчитывает, сколько элементов находится в UL при загрузке страницы, и если я удаляю элементы, он не пересчитывается... Любая идея, как решить эту проблему? - person Adam Tal; 13.03.2010
comment
Я говорю о первом методе, конечно (при перетаскивании, а не при добавлении элемента). Спасибо - person Adam Tal; 13.03.2010
comment
ок ок, я понял! ;-) нет проблем, но для динамической работы вам нужно перезагрузить страницу через ajax, используя jquery! - person Luca Filosofi; 14.03.2010

arrow_upward
10
arrow_downward

Чтобы функция срабатывала каждый раз, когда вы пытаетесь перетащить новый элемент в определенный список (динамически), вам нужно использовать метод 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');
        }
    });

});
person Spencer    schedule 05.09.2012