jquery droppable 方法的回调被调用两次

Question

我对以下事件有看法。 View ID 是“folders-block”。 我的元素是 View 是这样的:

<ul>
  <li></li>
  <li></li>
  <li></li>
 </u>
 <ul>
     <li>
       <ul></ul>
     </li>
  </ul>

下面是主干中的事件。

  events{
   "mousedown .all-folders": "dragCustomFolders"
  },
  dragCustomFolders: function(e){
    $('#folders ul li').draggable({
      cursor: 'move',
      drag: this.dragElement,
      revert: "invalid"
    });

    $('#folders li').droppable({
      drop: this.cardDrop,
    });
  }

当我将一个 li 从一个 ul 拖动到另一个 ul 时，仅调用一次 drop 。当我将 li 元素拖动到同一 ul 元素中的另一个 li 元素时，回调函数会被调用两次。

如何解决此问题。

Answer 1

尝试设置greedy可删除定义上的选项为 true:

By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.

代码:

$('#folders li').droppable({
    drop: this.cardDrop,
    greedy: true
});