jQuery UI可排序和两个连接列表

我试图将以下内容与jQuery和Sortable放在一起：我需要抓住两种情况：

• 答：移动同一列表中的项目
• B：将项目从一个列表移动到另一个列表

仅使用receive事件时解决案例B. 但是如果我同时绑定receive和stop它们也会在将项目从一个列表移动到另一个列表时被解雇。 这使得我无法捕获案例A，因为我无法确定该项目是从其他列表移动还是在同一列表中移动。 希望有道理。

这有点奇怪，因为我会认为我的用例是最常用的用例。

我渴望创意。 如果您想尝试一下，请参阅http://jsfiddle.net/39ZvN/5/ 。

HTML：

 
 
 
item 1
 
item 2
 
item 3
 
 
 
 
 
 
item 4
 
item 5
 
item 6
 
  

JS：

 $(function() { $('.sortable').sortable({ stop: function(event, ui) { // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird if(!ui.sender) alert("sender null"); else alert("sender not null"); }, receive: function(event, ui) { // Funktioniert top, damit kann ich Fall B abfangen alert("Moved from another list"); }, connectWith: ".sortable" }).disableSelection(); }); 

Answer 1

这很有趣。 我原以为取消会将项目移回原来的列表，但是接收事件很晚才会被触发并阻止其他事件被触发。 希望这可以帮助。 这个解决方案不起作用，但我愚蠢到不能看到它。 我删除了以前的代码，因为它完全是胡说八道。

这是一个使用多个事件跟踪状态的工作解决方案：

 $(function() { var oldList, newList, item; $('.sortable').sortable({ start: function(event, ui) { item = ui.item; newList = oldList = ui.item.parent().parent(); }, stop: function(event, ui) { alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id')); }, change: function(event, ui) { if(ui.sender) newList = ui.placeholder.parent().parent(); }, connectWith: ".sortable" }).disableSelection(); }); 

http://jsfiddle.net/39ZvN/9/

Answer 2

我想这就是你想要的http://jsfiddle.net/39ZvN/6/

您基本上必须分离可排序的命令并为每个UL分配一个id。

Answer 3

我也在寻找相同的…但以上所有解决方案都不能按我的意愿运作。 从jquery-ui连接的可排序列表获取两个列表的序列化/ toarray值，如果项目从一个移动到另一个。

最后我用更新的单一方法弄清楚了。

 function getSortableOrder(sortableList,ui){ var listItems = {} listItems['sortable'] = sortableList.sortable('toArray'); if(ui.sender!=null) listItems['sender'] = ui.sender.sortable('toArray'); console.log(listItems); } $('.sortable[sortable="true"]').sortable({ connectWith:".sortable", placeholder: "ui-state-highlight", update: function(ev, ui) { getSortableOrder($(this),ui); } }); 

   
 
 
item 1
 
item 2
 
item 3
 
 
 
 
 
 
item 4
 
item 5
 
item 6
 
  

Answer 4

你想要做的是一个非常常见的用例。 这就是为什么有这种非常简单的方法来实现它：

$（’＃list-A，＃list-B’）。sortable（{connectWith：’。sortable’}）;

这里的所有都是它的。

这是一个实例，在jQuery UI文档页面上有解释： http ： //jqueryui.com/demos/sortable/#connect-lists