16

首先，我知道这个问题之前在这个网站和其他网站上都被问过，但是对于我的场景来说，答案都是垃圾（如果它们不是完全垃圾的话），而且（至少对于这里的问题：jQuery UI drop event在 sortable 上的 droppable 火灾），建议只是完全关闭.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>

我没有重叠的sortablediv 或类似的东西，我想我理解“为什么”会发生这种情况（因为sortable默认情况下会获取可拖动属性？），我似乎对此无能为力。

当然，问题在于...

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

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

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

4

3 回答 3

28

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

您可以改用sortable'receive事件。

jsFiddle 演示

$("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {      
            alert("receive been triggered.");
        }
}).droppable({ });
于 2013-09-06T19:42:47.243 回答
2

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

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

drop: function( e, ui ) {
    if ( ! $('.already-dropped').length ) {
        $('body').addClass('already-dropped');
        setTimeout( function() {
            $('.already-dropped').removeClass('already-dropped');
        }, 100 );
        // callback code...
    }
}
于 2015-05-09T05:42:03.693 回答
-2

也许我有点太晚了，但我发布了这个希望它会对某人有所帮助。这是我使用的代码。基本上，如果函数被调用两次，它们之间的间隔应该很快（比人类通常做的更快），所以我将这个数字设置为 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);
于 2014-06-17T06:17:48.203 回答