jquery ui droppable on parent child issue

Question

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 ?

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.com/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... !!!