可放置小部件的 jQuery UI 放置事件触发两次

Question

首先，我知道这个问题之前已经被问过，无论是在这个网站还是其他网站，但对于我的场景来说，答案都是垃圾(如果它们不是完全垃圾的话)，并且(至少对于这里的问题:jQuery UI drop event of droppable fires on sortable )，建议只是完全关闭 .sortable ，这肯定不是我想要做的。

好的，我有这个 jquery(请记住，如果任何选项或 html id 看起来很愚蠢，这只是为了测试，以便我可以尝试找出答案):

$(function () {
    $("#sortable").sortable({
        revert: true
    });
    $("#draggable, #draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("#sortable").droppable({
        drop: function (event, ui) { alert("done been triggered."); }
    });

    $("ul, li").disableSelection();
});

这是有效的标记:

<div class="objectPaletteHolder">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me down</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, also</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, as well</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight click">Drag this down, click</li>
        <li id="draggable2" class="ui-state-highlight clicky">Drag this down, clicky</li>
    </ul>
</div>
<div class="editContainer">
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>

我没有重叠的 sortable div 或类似的东西，我想我理解'为什么'发生这种情况(因为 sortable默认情况下获取draggables属性？)，我似乎对此无能为力。

问题当然是......

drop: function (event, ui) { alert("done been triggered."); }

...被触发两次，而只需要一次。

我认为这个问题会有一个简单的解决方案，因为如果这个问题需要一堆复杂的脚本来修复，那么我认为这些特定的 jquery 小部件不值得这么麻烦。也许我只是感到困惑？

Answer 1

这是在同一元素上同时使用 sortable 和 droppable 的已知问题。

您可以使用sortable的receive事件来代替。

jsFiddle Demo

$("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {      
            alert("receive been triggered.");
        }
}).droppable({ });