javascript - 在同一列表中拖动时以及从一个列表移动到连接列表时如何区分可排序更新事件

Question

我有两个相连的可排序列表，#origin 和 #destination。当您从 #origin 拖放到 #destination 时，我可以看到以下事件按顺序发生:

1. #origin 更新
2. #origin 移除
3. #destination 接收
4. #destination 更新

但是在#origin 列表中拖放时，只会执行#origin 更新函数。

问题是当执行 #origin 更新时，它看起来与在同一列表中拖放时完全一样。在这两种情况下，ui.sender 都没有设置，并且由于它是在执行删除函数之前 执行的，所以我无法设置一个临时变量来说明发生了什么.

(查看 Fiddle 并查看控制台)

我想在我的更新函数中包含一个 ajax 调用，而不需要执行两次。因此，我需要一种方法来区分从一个列表拖动到另一个列表时调用的 #origin 更新(这样我基本上可以只 return false)和在同一个列表中拖动时调用.

我想获取 ui.position 并检查该坐标是否在 #origin 的边界内，但似乎必须有更多简单的解决方案。

Answer 1

这是您可以做到的一种方法:为每个组、起点和终点设置一个标志。像这样在 sortable 之上初始化它:

var updates={origin:false,destination:false};
$( ".config-room-ul" ).sortable({//...

在更新方法中，将其添加到顶部

update: function(e, ui) {
updates[$(this).attr('id')]=true; //...

现在为结束时触发的 stop 事件添加处理程序:

stop:function (e,ui) {
            if (updates.origin===true && updates.destination===true)
            {
             console.log('dragged from one group to another group');   
            }
            else if(updates.origin===true && updates.destination===false)
            {
             console.log('dragged within origin');   
            }
            else if(updates.origin===false && updates.destination===true)
            {
                console.log('dragged within destination');
            }

            //finally, clear out the updates object
            updates.origin=false;
            updates.destination=false;
        }

现在，如果某些东西被拖到它自己的组中，控制台应该显示“在原点内拖动”或“在目的地内拖动”。如果你拖到另一个组，它应该显示“从一个组拖到另一个组”。

参见 fiddle :http://jsfiddle.net/Wr9d2/3/

PS 如果您需要确定在组之间拖动时拖动从哪个组开始和结束，我认为代码很容易编辑来做到这一点。