JQuery UI: перемещение элементов из одного списка в другой

Question

Хотя это должно быть относительно простым, я не могу понять, как двигаться (а не копии) LI элементы между UL с.

Все, что я хочу, чтобы перетащить любой элемент из списка обув в список бар (или наоборот) без дублирования элемента.

Хотя connectToSortable делает почти то, что я хочу (хотя я бы предпочел, чтобы избежать sortable), он клонирует элемент - и вручную удалить исходный элемент, реагируя на stop события оказывается не так легко (например, обеспечение что действительно произошло падение).

Простой пример «привет мир» мне очень помог.

Answer 1

Пример Hello World можно найти здесь: http://jqueryui.com/demos/sortable/#connect-lists. Вам не нужен только draggable, только sortable.

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: '.connectedSortable' 
    }).disableSelection(); 
}); 

Если вы хотите запретить сортировку предметов в одном списке, это может быть способ пойти. Это не самый красивый пользовательский интерфейс, хотя (пользователю дается ложная надежда), и пользователь также может определить позицию перетаскивания в чужом списке.

$(function() { 
    var sender; 
    var recvok = false; 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: '.connectedSortable', 
     start: function() { 
      sender = $(this); 
      recvok = false; 
     }, 
     over: function() { 
      recvok = ($(this).not(sender).length != 0); 
     }, 
     stop: function() { 
      if (!recvok) 
       $(this).sortable('cancel'); 
     } 
    }).disableSelection(); 
}); 

Это действительно ужасная функция работает вокруг того, что я чувствую, неполнота в JQuery UI. Он сохраняет отправителя на sortstart и снимает флаг, позволяющий отказаться. Когда вводится другой приемник, он проверяет, не является ли он отправителем и помещает флаг. На sortstop проверяется флаг. Предупреждение: эта функция уродлива для глаз как пользователя, так и программиста, но она работает.