overthinkings

of Ruben Daniels

Multibrowser Advanced Drag&Drop

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

I LGPL-ed this code which is available for download here. The usage is quite simple and works as this:

For non-optimized use of the function the interface is the same for all browsers:

document.elementFromPoint(x, y);

If you would like to register elements to make it work faster use these methods:

//Use this at the start of your application
document.elementFromPointAdd(el); 

//Use this at the end of your application
document.elementFromPointRemove(el);

To see this in action visit www.ajax.org. Drag a product from the thumbnail view to the tree and see what happens.

I hope this is usefull to you for your project. Please direct any questions to the Javeline Internals Mailinglist so that more people can benefit from the answers.

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 […]