jQuery UI drop事件的可投放触发两次

时间:2019-04-05 12:57:22

标签: javascript jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

HTML

<div id="dropableArea">Drop area</div>
<hr>

<ul>
    <li class="dragModule">Item 1</li>
    <li class="dragModule">Item 2</li>
    <li class="dragModule">Item 3</li>
</ul>

jQuery

$(function(){
    $('.dragModule').draggable({connectToSortable:'#dropableArea',helper: 'clone'});

    $('#dropableArea').droppable({
        accept: '.dragModule',
        activeClass:'active-droppable',

        drop:function(){
            console.log('drop');
        }
    });

    $('#dropableArea').sortable({accept: '.dragModule',connectWith: '#dropableArea',revert: true,});
    $("#dropableArea").disableSelection();
});

我的问题是我要控制台console.log('drop');这是可放置的回调放置函数,它被调用了两次。

1 个答案:

答案 0 :(得分:1)

这是jQuery UI的已知问题。当您在同一元素上使用droppable和sortable时,会发生此问题。在这里,您在同一元素droppableArea上使用droppable和sortable 为了解决这个问题,请使用drop的{​​{1}}方法来代替droppable的{​​{1}}方法。两种情况在您的情况下都是相同的。

检查FIDDLE

recieve

如上更改代码,它将解决问题。请让我知道问题是否已解决

#UPDATE

您可以在可排序函数中添加以下代码

sortable