I'm putting together an application that utilizes Drag and Drop and
Sortable to manage an n-deep nested tree of sortables. After testing
the 'tree' option, I've found it inadequate for our purpose, so I
decided to create some custom functionality. After getting everything
working in Firefox, I began to test in IE (6 and 7) and noticed that
due to the awkward internal handling of element z-indexes, IE appears
able to drag child elements to their parents (and grandparents) and
successfully drop them, but is unable to drag parent elements to their
children. And oddly, once you start moving things around, IE will
begin to sporadically drop successfully, seemingly at random, between
random elements.

I created a simplified example here: http://64.34.169.197/zindex_demo.html

The grey rectangles are the drop zones for each branch of the tree.
The top-most one is for the root branch. Ondrop log and alerts what
element is being dropped onto which dropzone, just to show that the
drop is successful.

If you try it in Firefox, everything goes swimmingly; each branch in
the hierarchy is sortable with other items in that branch, dragging a
parent element takes its children with it, and you're able to drop
parents to children of other branches, as well as children to any
other element in the tree that isn't a child of the dragged element.

If you load it in IE (6 and 7), all of the dragging works fine. Some
of the dropping works fine. The problem appears mostly when you're
trying to drag children to parent elements. For instance, dragging
'almond' to 'orange's dropzone is successful. Dragging 'cashew' to
'almond' is not. Dragging 'banana' to 'cashew' is successful. Dragging
'banana' to 'clementine' is not. Dragging anything to the root
dropzone is successful.

I already know that IE disregards z-index declarations and internally
assigns z-indexes based on where elements appear in the DOM; what I
can't figure out is why some of the dropzones become 'obscured' and
unable to register the drop. I know that a draggable element, while
dragging, is set to a zindex of 1000. I tried setting dropzone z-
indexes to 999 via CSS, then later directly via JavaScript. Neither
test seemed to solve the problem.

Has anybody else experienced this issue before, or have any insight in
how to get all of the dropzones to register correctly without
suggesting that I restructure the HTML? The UL/LI hierarchy is defined
specifically this way so that when you drag a parent element, all of
its child elements (plus their dropzones) go with it.

Thanks!

-Kevin Kaiser


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to