Jquery UI - Nested Droppables/Sortables

Question

I am trying to build an interactive web App. using Jquery UI, but I am stuck here - I can't seem to find a way to "Nest" my "boxes" (See fiddle for demo). For example assume there are four boxes - A, B , C , D. If A is the parent with high values for width and height, I drag and drop b into A - This works fine. I try dragging and dropping another "box" C into A, which also works fine. But when I try to drop D (or even C, this doesn't matter) into B (Nesting), it doesnt seem to work (See fiddle).

Notice that the fiddle doesn't contain separate "Boxes" but instead just one box thats replicated multiple times. Also note that I haven't implemented the sorting feature (in the fiddle) yet since I haven't been able to fix the nesting issue.

JS Fiddle: http://jsfiddle.net/JQwsf/

Just to make sure I'm not trying to confuse anyone here, I've attached an image.

Any help is really much appreciated. Thank you.

Answer 1

Is this what you need?

Summary: the new inner box must be greedy to intercept events.