[Seaside] Drag and drop: how do you nest it?

[Lukas Renggli]

> Now, another quick question.  If I can't have nested D&D, I thought to
> myself, "I'll use the lightbox"!

I don't say you can't, I just say it is very tricky :-)

> But the dark overlayed background doesn't fit to all 4 edges of the browser
> window.  Instead of masking off the whole screen, the upper-left corner of
> the dark layer fits to the upper-left hand corner of the first draggable
> item in my list (the <li>'s content, not the number the browser renders to
> the left of it.)  Looking at...

Do the send to #lightbox: on your root component, instead of a child
component. The problem is that it doesn't work if a parent node is
positioned absolute (aka used for drag & drop) as well.

> Hmmm, maybe the two occurrences of:
>
> element.style.position = "absolute"
>
> ...in SULightbox>>script, should instead read...
>
> element.style.position = "fixed"

Yes, that would be cleaner, however IE6 does not understand fixed.

> That gets rid of the positioning problems.  However, the D&D event
> is propogating right through the background layer, even though the
> links are all non-operational.  Is that a z-index problem?

No, it is the way that script.aculo.us (the JavaScript part) handles
drag & drop: It has no notion of layers, it just calculates the
overlap of the dragged element with all droppables.

The solution would be that you do not enable the drag&drop for
elements behind the light-box and/or give them a different
containment-class, so that dragging from one list to the other is
restricted.

Lukas

-- 
Lukas Renggli
http://www.lukas-renggli.ch