Jquery帮助:可拖动到可排序,然后再次返回可拖动

时间:2009-03-24 07:17:40

标签: javascript jquery jquery-ui-sortable draggable

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

2 个答案:

答案 0 :(得分:5)

jQuery UI example似乎就像你追求的那样。它具有两个连接列表,用户可以在它们之间拖动元素。

但我怀疑您的方案与示例不符。假设您有一个拖动列表,一个UL,每个LI都可以拖动并链接到另一个UL,可以进行排序(例如,请参阅this link)。每次从拖动列表中拖动某些内容时,都会使用克隆的元素进行克隆。使用“out”事件,您可以在可排序列表外拖动项目时进行注册,如果触发“stop”事件时项目仍在外部,则将其从可排序项中删除。使用ui.position&可排序窗口小部件的ui.offset属性,您可以确定在从可排序项中实际删除项目之前是否将项目拖过拖动列表。

希望这有帮助。

答案 1 :(得分:0)

我认为最简单的解决方案是让你的可拖动列表也可以删除,并处理掉落事件。我有一个#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();
    }
  }
});