javascript - droppable 触发两次的 jQuery UI drop 事件

Question

HTML

<div id="dropableArea">Drop area</div>
<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');这是一个可放置的回调放置函数，它被调用了两次。

Answer 1

这是 jQuery UI 的一个已知问题。当您在同一元素上使用 droppable 和 sortable 时会出现此问题。在这里，您在同一元素 droppableArea 上使用了 droppable 和 sortable为了解决这个问题，使用 sortable 的 recieve 方法代替 droppable 的 drop 方法。两者在您的情况下做同样的事情。

检查 FIDDLE

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

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

  $('#dropableArea').sortable({
    accept: '.dragModule',
    connectWith: '#dropableArea',
    revert: true,
    receive: function (event, ui) {      
       console.log("drop");
    }
  });
  $("#dropableArea").disableSelection();
});

如上修改代码即可解决问题。如果问题已解决，请告诉我

#UPDATE

可以在sortable函数中加入如下代码

 beforeStop : function (event, ui) {      
   ui.helper.html('hello');
 }