可抛出两次的可放置小部件的jQuery UI drop事件

Question

首先,我知道这个问题已经被问过,无论是在本网站和其他人,但答案都是废话我的情况下(如果他们不完全是废话),和(至少在问题在这里:jQuery UI的下降事件可拆卸的火灾可能会出现,建议只是.sortable完全关闭,这肯定不是我想要做的.

好吧,我有这个jQuery(记住,如果任何选项或HTML IDS都看傻了,这仅仅是测试,所以我可以尝试,并想出解决办法):

$(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>

我没有重叠的sortablediv或类似的东西,我想我理解'为什么'这种情况发生了(因为sortable默认情况下得到draggables属性？),我似乎无法做任何事情.

问题当然是......

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

...只需要一次,就会被触发两次.

我认为这个问题会有一个简单的解决方案,因为如果这个问题需要修复一堆复杂的脚本,那么我认为这些特殊的jquery小部件不值得一试.也许我只是困惑？

Answer 1

这是使用两者sortable和droppable同一元素的已知问题.

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

jsFiddle演示

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