I am using jquery ui droppable widget. I have the following structure :

Example Fiddle

 <div class="parent">
    parent
   <div class="child">
     child
   </div>
  </div>

Both parent and child elements are droppable and both are accepting the same item. My issue is when i am dropping the element on child than also parent drop event is executing ( please check the fiddle ). How can i stop this behaviour ?

I am using jquery ui droppable widget. I have the following structure :

Example Fiddle

 <div class="parent">
    parent
   <div class="child">
     child
   </div>
  </div>

Both parent and child elements are droppable and both are accepting the same item. My issue is when i am dropping the element on child than also parent drop event is executing ( please check the fiddle ). How can i stop this behaviour ?

• javascript
• jquery
• jquery-ui

1 Answer 1

I guess the better way is to use greedy option of droppable. Don't forget to go through the API if you find any problem. http://api.jqueryui./droppable/#option-greedy

Here is how your code looks like with greedy option

$(".child").droppable({ 
    accept: '.item',
    greedy: true,
    drop: function(e, ui){ 
     alert("drop on child");
    }
});

There you go... !!!