Справка по Jquery :Перетаскиваемый в Сортируемый, а затем снова обратно в перетаскиваемый

Question

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

Answer 1

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

Но я подозреваю, что ваш сценарий не соответствует приведенному примеру.Допустим, у вас есть список перетаскивания, UL с каждым LI, сделанным перетаскиваемым, и связанным с другим UL, сделанным сортируемым (см. эта ссылка для примера).Каждый раз, когда вы перетаскиваете что-либо из списка перетаскивания, используется clone перетаскиваемого элемента.Используя событие "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();
    }
  }
});