it-swarm.com.ru

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

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

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

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

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

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

18
user1038814

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

  1. Проверка наличия у элемента класса number
  2. и проверка, был ли удален элемент списка в 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');
            }
        }
    });        
});​
16
Richard

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

Uncaught TypeError: Cannot read property 'removeChild' of null

В документации особо сказано

cancel()

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

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

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

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

Демо

26
T J

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

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

 $ ('# list2'). sortable ({
 connectWith: 'ul', 
 receive: function (ev, ui) {
 if (ui.item.hasClass (" число ")) 
 ui.sender.sortable (" отмена "); 
} 
}); 
13
Mj Azani

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

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

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
1
Ian Young
beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

попробуй это.

0
TanvirChowdhury

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

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

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

0
ollie

Если а) у вас есть только эти 2 списка, и б) вам все равно, что ваш «номер» на самом деле перетаскивается, а затем возвращается обратно, вы можете просто предотвратить его перетаскивание следующим образом:

 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
0
Narges Ahani