可放置小部件的 jQuery UI 放置事件触发两次 [英] jQuery UI drop event of droppable widget firing twice

问题描述

首先，我知道这个问题之前曾在本网站和其他网站上被问过，但对于我的场景来说，答案都是垃圾(如果它们不完全是垃圾)，并且(至少对于这里的问题:可放置在可排序上的可放置火的jQuery UI放置事件)，建议只是完全关闭 .sortable，这肯定不是我想要做的.

好的，我有这个 jquery(请记住，如果任何选项或 html id 看起来很傻，这只是为了测试，所以我可以尝试解决这个问题):

$(function () {$("#sortable").sortable({回复:真});$("#draggable, #draggable2").draggable({connectToSortable: "#sortable",助手:克隆"，回复:无效"});$("#sortable").droppable({下降:功能(事件，用户界面){警报(完成已触发.")；}});$("ul, li").disableSelection();});

这是有效的标记:

<ul><li id="draggable" class="ui-state-highlight">把我拖下来</li><li id="draggable2" class="ui-state-highlight">把它拖下来</li><li id="draggable2" class="ui-state-highlight">将其向下拖动</li><li id="draggable2" class="ui-state-highlight">将其向下拖动</li><li id="draggable2" class="ui-state-highlight">把它拖下来</li><li id="draggable2" class="ui-state-highlight">把它拖下来</li><li id="draggable2" class="ui-state-highlight">把它拖下来</li><li id="draggable2" class="ui-state-highlight click">把这个拖下来，点击</li><li id="draggable2" class="ui-state-highlight clicky">向下拖动，clicky</li>
<div class="editContainer"><ul id="sortable"><li class="ui-state-default">项目 1</li><li class="ui-state-default">项目 2</li><li class="ui-state-default">项目 3</li><li class="ui-state-default">项目 4</li><li class="ui-state-default">项目 5</li>

我没有重叠的 sortable div 或类似的东西，我想我明白 '为什么' 会发生这种情况(因为 sortable默认情况下获取可拖动属性?)，我似乎无能为力.

当然，问题在于...

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

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

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

解决方案

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

您可以改用 sortable 的 receive 事件.

jsFiddle 演示

$("#sortable").sortable({回复:真实，接收:函数(事件，用户界面){alert("接收已触发.");}}).droppable({});

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.

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

And here is the valid markup:

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

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.

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?

解决方案

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

You can use the sortable's receive event instead.

jsFiddle Demo

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

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