Справка Jquery: перетаскивание в Sortable и затем снова в перетаскивание

Question

У меня есть пул элементов в списке перетаскивания, который подключен к сортируемому параметру connectToSortable. Теперь я хочу удалить некоторые элементы из этого списка сортировки и переместить их обратно в список перетаскивания. Вроде как отменить. Предположим, пользователь перемещает около 5 элементов для сортировки списка и решает, что ему нужно только 4 элемента, и решает просто перетащить ненужный элемент из списка сортировки в список перетаскивания. Как мне сделать это БЕЗ добавления ссылки «удалить» в списке сортировки. Большое спасибо. Для получения дополнительной информации, пожалуйста, обратитесь к http://the -stickman.com / web-development / javascript / jquery-drop-items-from-a-draggable-list-to-sortable-list /

Answer 1

Этот пример jQuery UI выглядит как то, что вы ищете. Он имеет два связанных списка, и пользователь может перетаскивать элементы между ними.

Но я подозреваю, что ваш сценарий не соответствует примеру. Допустим, у вас есть список перетаскивания, UL с каждым LI, сделанным перетаскиваемым и связанным с другим UL, сделал сортируемым (см. эту ссылку для примера). Каждый раз, когда вы перетаскиваете что-либо из списка перетаскивания, используется клон перетаскиваемого элемента. Используя событие «out», вы можете зарегистрироваться, когда кто-то перетаскивает элемент за пределы сортируемого списка, и если элемент все еще находится снаружи, когда инициируется событие «stop», удалите его из сортируемого. Используя свойства ui.position & ui.offset сортируемого виджета, вы можете определить, перетаскивался ли элемент поверх списка перетаскивания, прежде чем фактически удалить элемент из сортируемого.

Надеюсь, это поможет.

Answer 2

Я думаю, что самое простое решение - сделать ваш перетаскиваемый список доступным и обработать это событие удаления. У меня есть #priority_articles_list как сортируемый и li.article как съедобный, они внутри #articles. В самом простом случае вы можете просто позвонить ui.draggable.remove();, что должно сработать.

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});