Question

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

#origin更新
#origin删除
#destination收到
#destination更新

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

问题在于，当执行#origin更新时，它看起来与在同一列表中拖放时完全相同。在这两种情况下，都没有设置ui.sender，因为在执行remove函数之前执行，我无法设置临时变量来说明发生了什么。

（请参阅此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;
        }

现在控制台应显示“在原点内拖动”或“在目的地内拖动”，如果在其自己的组内拖动了某些内容。如果您拖动到另一个组，它应显示“从一个组拖到另一个组”。

请参阅小提琴：http://jsfiddle.net/Wr9d2/3/

PS如果您需要确定在组之间拖动时拖动开始和结束的组，我认为代码很容易编辑。

Answer 2

我想到的另一种方法是在拖动之前和之后计算#origin列表中的子元素的数量而不是使用该位置。如果它们不同，则调用的update函数来自#origin。您还需要比较元素ID以确保它们匹配。

首先在sortable声明之前添加此内容：

var sender_id = null;
var sender_children = 0;

然后添加以下拖动开始选项：

    start: function(e, ui) {
        sender_id = $(this).attr("id");
        // Get number of child elements from the sender. We subtract 1
        // because of the placeholder (which adds another child)
        sender_children = $(this).children().length - 1;
    }

然后在update函数中，检查发件人的id是否匹配，ui.sender为空，并且sender元素的子项数不同。它应该少一个，因为您拖动的元素已被删除。如果是，则跳过那个，因为它是从原点而不是目的地调用的。

    if ($(this).attr("id") == sender_id
        && ui.sender == null
        && $(this).children().length != sender_children
    ) {
        return true;
    }

在JSFiddle上查看。

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

2 个答案: