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.
Is this what you need?
Summary: the new inner box must be greedy to intercept events.