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

问题描述

首先，我知道这个问题在此站点和其他站点之前都曾被问过，但是对于我的情况，答案都是垃圾(如果它们不完全是垃圾)，以及(至少对于这里的问题:可排序的火在可排序对象上的jQuery UI拖放事件)，建议只是完全关闭.sortable，这当然不是我想要的.

Firstly, I know this question has been asked before, both in this site and others, but the answers are all rubbish for my scenario (if they're not rubbish entirely), and (at least for the question here: jQuery UI drop event of droppable fires on sortable), the suggestion is just to turn off .sortable entirely, which is most certainly not what I want to do.

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

Okay, I have this jquery (keep in mind if any options or html ids look silly, this is just for testing so I can try and figure this out):

$(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默认情况下具有可拖动属性)?似乎对此无能为力.

I do not have overlapping sortable divs or anything like that, and I think I understand 'why' this is happening (because sortable gets draggables properties by default?), I just can't seem to do anything about it.

当然，问题在于...

The problem, of course, is that the...

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

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

...is being triggered twice, when it is only needed once.

我认为对这个问题有一个简单的解决方案，因为如果这个问题需要修复一堆复杂的脚本，那么我认为这些特殊的jQuery小部件将不值得所有麻烦.也许我只是感到困惑?

I would think that there would be a simple solution to this problem, for if this problem required a bunch of complex scripting to fix, than I would think that these particular jquery widgets wouldn't be worth all the trouble. Perhaps I am just confused?

推荐答案

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

That's a known issue using both sortable and droppable on the same element.

您可以改用sortable的receive事件.

jsFiddle演示

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

这篇关于可拖放小部件触发两次的jQuery UI拖放事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！