drag and drop inside nested Divs

Question

This is my requirement,

1. I have an item called dragItem to drag and Drop.
2. I have 2 Divs, Outer and inner
3. I need to do in this order - Drag the dragItem in the outer Div (So that I do some of my functionalities. At this point only the next droppable code will be enabled.) then I again drag the dragItem and drop in inner Div.

The problem I get is when the second time I drag and drop into inner Div, the outer droppable code is getting invoked first and then getting into the inner droppable, as the inner div is inside outer Div.

A similar one I tried Is attached. check fiddle

So how to rectify this? I need to enable the droppable wherever I drop Item even though it is in multilayered Divs. How to achieve this?

--Thanks In Advance

Answer 1

jQuery ui droppable supports an option called greedy: true which will stop the event propagation.

Check this fiddle