Jquery 帮助：可拖动到可排序，然后再次回到可拖动答案

【问题标题】：Jquery Help : Draggable to Sortable and then back to draggable againJquery 帮助：可拖动到可排序，然后再次回到可拖动
【发布时间】：2010-10-15 03:42:04
【问题描述】：

我在拖动列表中有一个项目池，它使用 connectToSortable 选项连接到可排序的项目。现在我想从这个排序列表中删除一些项目并将它们移回拖动列表。有点像撤消。假设用户将一些 5 个项目移动到排序列表并决定他/她只需要 4 个项目，并决定只将不需要的项目从排序列表拖到拖动列表中。如何在排序列表中不添加“删除”链接的情况下完成此操作。非常感谢。更多信息请参考http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

【问题讨论】：

您提供的链接似乎无效，请提供链接或代码的相关部分。

标签： javascript jquery jquery-ui-sortable draggable

【解决方案1】：

这个jQuery UI example 似乎是您所追求的。它具有两个连接列表，用户可以在它们之间拖动元素。

但我怀疑您的场景与示例不符。假设您有一个拖动列表，每个 LI 的 UL 可拖动并链接到另一个 UL 可排序（参见 this link 示例）。每次从拖动列表中拖动某些东西时，都会对拖动的元素使用克隆。使用“out”事件，您可以在将一个项目拖到可排序列表之外时进行注册，如果在触发“停止”事件时该项目仍在外部，则将其从可排序列表中删除。使用可排序小部件的 ui.position 和 ui.offset 属性，您可以确定该项目是否在实际从可排序中删除项目之前被拖动到拖动列表上。

希望这会有所帮助。

【讨论】：

【解决方案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();
    }
  }
});

【讨论】：