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

Question

首先，我知道这个问题以前在这个网站和其他网站上都被问过，但是对于我的场景来说，答案都是垃圾（如果它们不是完全垃圾的话），并且（至少对于这里的问题：@ 987654321@)，建议只是完全关闭.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 默认获得可拖动属性？），我只是似乎对此无能为力。

当然，问题在于...

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({ });

Answer 2

我遇到了类似的问题。有 2 个可放置元素，其中一个具有相对位置，另一个具有绝对位置。它们不是嵌套的，但是具有绝对位置的部分高于具有相对位置的部分（在 jQuery 文档中，这称为“相交”）。当我将可拖动元素移动到“绝对”可放置元素时，放置事件被触发了两次。我一直在寻找几天，但没有找到任何解决方案。

然后我决定做一个简单的通用解决方法。看起来不是很吸引人，但这将有助于在任何情况下触发 2 个 drop 事件。

drop: function( e, ui ) {
    if ( ! $('.already-dropped').length ) {
        $('body').addClass('already-dropped');
        setTimeout( function() {
            $('.already-dropped').removeClass('already-dropped');
        }, 100 );
        // callback code...
    }
}

Answer 3

也许我有点太晚了，但我发布了这个希望它可以帮助某人。这是我使用的代码。基本上，如果函数被调用两次，它们之间的间隔应该很快（比人类通常做的更快），所以我将这个数字设置为 200 毫秒。

我使用 localStorage 设置了一个名为“last_call”的变量。这是调用函数的时间。在下一次调用中，我们将检查之前是否调用过该函数。如果没有调用，该函数将继续执行。如果它被调用，我们将检查它最后一次被调用的时间。如果它在 200 毫秒内被调用（显然是机器调用，而不是人工调用），我们将不会再次调用它。

    var d = new Date();
    var this_time = d.getTime();
    if ( localStorage.getItem("last_call") != null)
    {
        if ((this_time - parseInt(localStorage.getItem("last_call"))) < 100)
        {

            return;
        }

    }
    localStorage.setItem("last_call", this_time);