jquery可排序/可拖动双重事件触发

Posted 2023-05-08

【中文标题】jquery可排序/可拖动双重事件触发

【英文标题】：jquery sortable/draggable double event firing

【发布时间】：2011-04-02 17:00:19

【问题描述】：

我有一些可以正常工作的拖放代码。只是有一个小问题。我注意到，如果我在 drop 函数中添加警报以进行调试（例如，alert(draggedItem.text());），当我将某些东西放入可拖动区域时，它会触发两次警报。我在另一篇文章中读到，一起使用 droppable 和 sortable 会导致这种奇怪的双重事件发生。但是我需要使用 droppable 事件来获取拖动的项目对象（ui.draggable）——这样我可以在放下它时对其进行操作。如果有任何其他获取可拖动对象的方法，请告诉我:) 另外，如果您对为什么会发生这种情况有解释，那会很有趣...

$(".field > li").draggable(
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
);

$(".dragrow").droppable(
    drop: function(e, ui) 
        draggedItem = ui.draggable;
        //alert(draggedItem.text());
    
).sortable( //code here to do stuff with 'draggedItem'

我还有另一个与此相关的查询，但由于我的代码很大，我无法在此处发布完整的内容。因此，如果您无法提供帮助，我可以理解-只要您想到一些非常酷的事情。基本上我有一个“块”列表，我可以将其拖入多行。可以使用切换事件隐藏各个行。如果我有 3 行，我可以将块拖到其中的任何一个中。如果我然后隐藏第一行，我现在无法拖入其他两行。不过，我仍然可以对它们进行排序。一旦我开始对它们进行排序，我就可以再次拖入它们。奇怪...

【参考方案1】：

查看DEMOhttp://jsfiddle.net/yeyene/FUyTe/1/

正如您所提到的，是的，同时使用 droppable 和 sortable 会导致这种奇怪的双重事件发生。但是，如果您仍想使用draggedItem object，您仍然可以将其与可排序接收选项一起使用。

另外，您可以使用ui.item 来获取当前拖动的元素。

尝试评论和关闭每个警报，看看，现在它只触发一次。

$(".field > li").draggable(
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
);

$(".dragrow").droppable(
    drop: function(e, ui) 
        draggedItem = ui.draggable;
    
).sortable( 
    receive: function(e, ui) 
        // here is the draggedItem object of "droppable"
        alert(draggedItem.text());

        // here is the draggedItem object of "sortable"
        draggedItem2 = ui.item;
        //alert(draggedItem2.text());
    
);

这是修改已删除元素的 html 的一种方法。

演示http://jsfiddle.net/yeyene/7fEQs/8/

【参考方案2】：

您是否检查过您的网站上没有两次 jquery 脚本标签？

【讨论】：

是的，我有。实际上发现这个旧帖子有人提出了一个我从未跟进的解决方案（当时一定是被另一个项目分心了！） - ***.com/questions/2095691/… 所以我仍然无法弄清楚为什么切换可放置区域会禁用其他可放置区域...