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

Question

我有一些可以正常工作的拖放代码。只是有一个小问题。我注意到，如果我在 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 行，我可以将块拖到其中的任何一个中。如果我然后隐藏第一行，我现在无法拖入其他两行。不过，我仍然可以对它们进行排序。一旦我开始对它们进行排序，我就可以再次拖入它们。奇怪...

Answer 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/

Answer 2

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