Jquery drop callback of droppable method called twice

Asked By: Anonymous

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.

Solution

Answered By: Anonymous

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