Jquery drop callback of droppable method called twice -

i have view below event. view id "folders-block". element view this:

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

below 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 drag li 1 ul ul drop called once. when drag li element li element within same ul element drop callback function called twice.

how fix issue.

try set greedy option true on droppable definition:

by default, when element dropped on nested droppables, each droppable receive element. however, setting option true, parent droppables not receive element. drop event still bubble normally, event.target can checked see droppable received draggable element.

code:

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