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.

enter image description here

Any help is really much appreciated. Thank you.

And you've made b both draggable AND droppable? And the "accepts" matches up. I'd check the fiddled, but this is from my phone... — Michael
– Michael, Commented Jul 2, 2011 at 21:23
No Michael, I think B is just draggable, A is just droppable. Thanks though. — dsignr
– dsignr, Commented Jul 3, 2011 at 6:04

servik · Accepted Answer · 2011-07-03 05:13:59Z

21

Is this what you need?

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

answered Jul 3, 2011 at 5:13

servik

3,1114 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dsignr Over a year ago

Its perfect Sigurd, Thank you so much!! But is it possible to make this chaining infinite, for example, a box within a box within a box within..etc ??

servik Over a year ago

Yep! You need only to replace the $temp.appendTo(this); with your appendnow($temp, $(this)); . Click here to see. Also you need to recalculate the dimensions of each dropped box. In the example above I set dimensions like half of the parent. Sorry for my english. :)

dsignr Over a year ago

You're one amazing guy. Thanks a million dude. It worked flawlessly! :)

mxro Over a year ago

Here is the link to Option Greedy in the JQuery UI documentation.

Brijesh Over a year ago

@sigurd I am having issue to implement same above problem in here

Collectives™ on Stack Overflow

Jquery UI - Nested Droppables/Sortables

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related