how to create a system of nestable, draggable containers

[nekoflux]

Hello,

I'm building a simple user interface design application. The idea is
you could drop buttons, labels, textfields, and containers onto the
screen to do a quick UI design. I want the containers to be nestable.
For example if you drop a container onto the screen, and then drop a
button onto that container, when you drag the container all its
children would move too. I'm using jquery and threedubmedia's most
excellent drag and drop plugin, and I'm wondering if this is
possible? I'm not sure how to programmatically define a nestable
system like this, but it seems like it *should* be possible.

Any thoughts would be greatly appreciated!

-Mike

[Sahab Yazdani]

I think the best way would be to use the DOM to your advantage and not
worry about the programmatic definitions. The container elements would
be DIV drop targets that can have the other component types as their
DOM children. All component types would be draggable obviously. Since
the DOM is doing the heavy lifting w.r.t. ownership, and events
bubble, it becomes almost trivial to determine which element is being
dragged. When containers get dragged, they automatically drag their
children with them since they are owned in the DOM.

The CSS *may* become a little tricky since the origin of an element is
determined by its parent when position: absolute is used, but that is
just a bit of simple math to fix (and I actually think the plug-in
gives you position relative to the drop target as well.)

When you want to actually use the nesting relationship in your code,
you'd use jQuery to traverse the DOM and find control/container
relationships starting at the root container element.

That's how I'd do it anyways. I hope that that sketch helps out a bit.

[3wme]

Your ultimate solution depends on your specific requirements, which
are still a little unclear to me. When you place elements do you want
them to remain absolutely positioned? Or would the elements simply be
inserted into the static flow at that point (like a portal/widget
layout)? Either way, as Sahab described, nested elements inside a
parent container element will automatically get dragged and dropped
with the parent. If you give me more specifics, I can mock-up a demo
to get you moving in the right direction.