Jquery drop callback of droppable method called twice

Question

I have a view with below event. View Id is "folders-block". my element is View are like this:

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

Below is the event in backbone.

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

When I drag an li from one ul to another ul drop is called only once. When I drag li element to another li element within same ul element drop callback function is called twice.

How to fix this issue.

Answer 1

Try set greedy option to true on the droppable definition:

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.

Code:

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