overthinkings

of Ruben Daniels

Multibrowser Advanced Drag&Drop

July 12, 2007 at 1:36 pm · Filed under Tech, Javeline

I have to admit that I underestimated the advancedity of the method a bit. I thought I could simply walk the tree, find the visible child node of the heighest z-index node (or itself) that covers the coordinates, and be done. It wasnt quite that simple.

Tree structure problems
This issue has to do with the fact the an element A can have a child element B that is not inside A’s coordinate space and has a larger z-index than a peer of A who has a z-index and is position absolute. This problem is best explained with an example. I’ll inline the css in this example to make it extra clear.

<body>
   <div id="pdiv">
      <div>
         <div style="position:absolute;left:10px;
                        top:10px;width:100px;
                        height:100px;z-index:100;
                        background:red"></div>
      </div>
   </div>
   <div style="z-index:10;position:absolute;left:10px;
                  top:10px;width:100px;height:100px;">
      Lower Div
   </div>
</body>

fig 2. no position on parent

In this example you will see what is displayed in fig 2. The red div is position relative to the root element even though it is a child of a child of a div. Because it’s z-index is higher than the green div it’s completely covering it.

fig 3. parent with position

When we put style=”position:relative” on the ‘pdiv’ the situation restores to a ‘normal’ situation where the tree structure is adhered to, showed in fig 3. Of course this is correct behaviour for a browser, but it makes the elementFromPoint algorithm more advanced.

Pages: 1 2 3 4

Permalink

7 Comments »

Multibrowser Advanced Ajax Drag&Drop » D’ Technology Weblog: Technology News & Reviews wrote @ July 15th, 2007 at 8:34 pm

[…] Source:→ Homepage Technorati Tags: AJAX, Application, Multibrowser Drag&Drop Share This Close […]

John Resig wrote @ July 17th, 2007 at 10:46 pm

Great work! A couple quick questions: What’s the license on this code? There’s no license specified in the file. (A liberal MIT or Public Domain would be very awesome!) Also, the file is chown’d as root - making it difficult to access in most situations. Thanks for making this available.

Jouni Koivuviita wrote @ July 23rd, 2007 at 6:45 am

Great work on implementing this method.

It’s quite tricky to accomplish this behaviour, as the event dispatching implementation doesn’t work as expected. I have a need for this method as well, and since I didn’t really find anything on the web, I started to make my own as well.

I tested your method with my own testcase, and noticed it fails to find the right element when there are several elements on top of each other, styled either position:relative or absolute. The script doesn’t handle the scroll overflow correctly, and all elements below the red rectangle are selected in stead the red.

Here’s the testcase:

Option 1Option 2 Gold layer


Button 2
Button 1
Button 3
Option 1Option 2
100
50

150

This is a pretty obscure situation, but to get the most robust method these need to be taken into consideration as well.

I managed to get my own implementation of elementFromPoint to handle all the situations in my own testcase. The performance is not particularly fast, with that little testcase, it takes 32ms to find the element (it always traverses the whole document tree). I hope I can optimize it a bit…

Still, exellent work on this method and the Javeline Platform, it seem very well made and flexible!

Jouni Koivuviita wrote @ July 23rd, 2007 at 6:47 am

…and of course wordpress stripped all my HTML code above. Of well, I guess I can send it to you if you want.

Jeff Walden wrote @ August 22nd, 2007 at 8:13 pm

Luckily there is a (non-standard) method we can use to help us find the element we drop on. I’m talking about the document.elemenFromPoint method. You just give it an x and y coordinate and it returns the top (z-index) element for you at that position.

Question: why does this work, if the draggable thing you have is displayed above the element to which you’re dragging? Shouldn’t the thing you’re dragging have a higher z-index than the thing over which that draggable hovers?

Ruben wrote @ August 23rd, 2007 at 10:14 am

Hi Jeff,

In Javeline Platform’s dragdrop library I offset the drag indicator to outside the screen and then use elementFromPoint:

indicator.style.top = "10000px";
var el = document.elementFromPoint(e.clientX+document.documentElement.scrollLeft, e.clientY+document.documentElement.scrollTop);

That works for all implementations.

Rgds, Ruben

Javascript News » Blog Archive » Multibrowser Advanced Drag&Drop wrote @ September 4th, 2007 at 3:09 am

[…] Daniels have implemented document.elementFromPoint for Firefox which makes it a lot easier to create more advanced drag&drop implementations for Ajax […]