Предотвратить падение элемента списка в JqueryUI сортируемом

У меня есть два списка #sortable1 и #sortable 2, которые связаны с сортировками, как показано в этом .

Вы можете перетаскивать элементы списка от sortable1 до sortable 2. Однако, если элемент сортируемый 1 содержит класс "число", я хочу предотвратить падение Сортировка2 и, таким образом, сделать перетаскиваемый элемент вернитесь в сортируемый 1.

Я использовал следующее в sortable2:

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

но он полностью удаляет элемент списка из обеих таблиц. Любая помощь будет оценена.

Ответы

Ответ 1

Вы можете использовать комбинацию методов beforeStop и sortable('cancel') для проверки перемещаемого элемента. В этом примере, при удалении элемента, я проверяю, действителен ли элемент:

Проверка того, имеет ли элемент класс number
и проверка того, был ли элемент списка удален в list2

Это немного более жестко закодированное, что я хотел бы, так что в качестве альтернативы вы можете проверить родительский элемент сброшенного элемента на this, чтобы проверить, отличаются ли эти списки. Это означает, что вы могли бы иметь элемент number в list1 и list2, но они не являются взаимозаменяемыми.

Пример jsFiddle

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});

Ответ 2

Для тех, кто читает это в будущем, как указано в briansol в комментариях к принятому ответу, он выдает ошибку

Uncaught TypeError: Cannot read property 'removeChild' of null

В документации, в частности, говорится

cancel()

Отменяет изменение текущей сортировки и возвращает ее в состояние до начала текущего сортировки. Полезно в остановке и получать функции обратного вызова.

Отмена сортировки во время других событий ненадежна, поэтому лучше использовать событие receive, как показано в Mj Azani ответить или использовать stop событие следующим образом:

$('#list1').sortable({
  connectWith: 'ul',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

$('#list2').sortable({
   connectWith: 'ul',
});

Демо-версия

Ответ 3

Попробуйте этот пример

$('#list1').sortable({
    connectWith: 'ul'
});    

$('#list2').sortable({
    connectWith: 'ul',
    receive: function(ev, ui) {
        if(ui.item.hasClass("number"))
          ui.sender.sortable("cancel");
    }
});

Ответ 4

После нескольких экспериментов я обнаружил, что самым простым методом является использование события remove, которое по существу только срабатывает, когда вы пытаетесь удалить элемент в новую сортировку (которая ранее была доступна как цель с использованием connectWith).

Просто добавьте это в свой сортируемый вызов:

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},

Ответ 5

Если вам вообще не нужно перетаскивать элементы с помощью класса "номер", вы также можете ограничить всю функциональность перетаскивания элементами, которые не имеют класса "число":

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});

Вы можете попробовать здесь: http://jsfiddle.net/60gwjsgb/1/