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

Question

我有一些拖&删除按原样工作正常的代码。只是有一点疑问。我注意到，如果我在放置函数中添加一个警报以进行调试（例如alert(draggedItem.text());），当我将某些东西放入可拖动区域时，它会触发警报两次。我在另一篇文章中读到使用 droppable &可排序在一起会导致这种奇怪的双重事件发生。但我需要使用 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

检查演示 http://jsfiddle.net/yeyene/FUyTe/1/

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

此外，您还可以使用 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 脚本标记？