Drag'n drop and strange z-index issue

[Nicolas Terray]

Howdy all,

I'm using scriptaculous 1.9 and prototype 1.7 and would like to drag
'n drop some cards on a webpage.

The issue I'm facing with is the fact that the cards can be stacked.

As an example, please go to this snippet:
http://jsfiddle.net/QxjNc/9/

The card C is the "child" of B, thus when drag'ndropping B, I drag'ndrop also C.

Now to reproduce the problem:
1. Drag C to the right (the dropzone becomes pink) and drop it. All is ok.
2. Drag B (+C) to the right and drop it. All is ok.
3. Drag C to the right and... tadaaa ! C is dragged *in the back* of
the right part, whereas it was not the case at step 1.

(tested with IE/Fx/Cr)

How could you explain that? How can it be fixed?

Thanks,
Nicolas Terray

[Victor]

Hi!

 

The issue I'm facing with is the fact that the cards can be stacked.
As an example, please go to this snippet: http://jsfiddle.net/QxjNc/9/

The card C is the "child" of B, thus when drag'ndropping B, I drag'ndrop also C.

Now to reproduce the problem:
1. Drag C to the right (the dropzone becomes pink) and drop it. All is ok.
2. Drag B (+C) to the right and drop it. All is ok.
3. Drag C to the right and... tadaaa ! C is dragged *in the back* of
the right part, whereas it was not the case at step 1.

How could you explain that? How can it be fixed?

http://www.tek-tips.com/viewthread.cfm?qid=1467777

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Local_stacking_contexts 

https://developer.mozilla.org/en/Understanding_CSS_z-index

Every element whose z-index is specified as an integer establishes a new, “local”, stacking context in which the element itself has stack level 0. This is the difference I mentioned before between z-index: auto and z-index: 0. The former doesn’t establish a new stacking context, but the latter does.

When an element establishes a local stacking context, the stack levels of its positioned descendants apply within this local context only. These descendants can be re-stacked with respect to one another, and with respect to their parent, but not with respect to the parent’s siblings. It’s like the parent forms a “cage” around its descendants, so that they cannot escape from it. The descendants may be moved up and down within this cage, but they can’t get out of the cage. The parent and its descendants will form an indivisible unit within the stacking context that surrounds the parent.

[Victor]

In short words, B element after dragging becomes "z-index: 0" instead of original "z-index: auto" and establishes new local stacking context. The logic in startDrag()/finishDrag() methods should be fixed to properly restore initial z-index for "z-index: auto" (now it defaults to 0).

[Victor]

How can it be fixed?

in startDrag() (dragdrop.js):

    if (this.options.zindex) {

      // FIXED z-index: auto -> z-index: 0

      // was this.originalZ = parseInt(Element.getStyle(this.element, 'z-index') || 0, 10);

      this.originalZ = Element.getStyle(this.element, 'z-index');

      this.originalZ = this.originalZ ? parseInt(this.originalZ, 10) : "auto";

      this.element.style.zIndex = this.options.zindex;

    }