Search code examples
javascripteventsdrag-and-dropfirefox-3

How do I get clientX and clientY to work inside my "drag" event handler on Firefox?


Mozilla Firefox 3.x seems to have a bug when listening to the "ondrag" event. The event object doesn't report the position of the object being dragged, clientX, clientY, and other screen offsets are all set to zero.

This is quite problematic as I wanted to make a proxy element based on the element being dragged and using of course, clientX and clientY to adjust its position.

I know that there's cool stuff around such as setDragImage in HTML5 but I want to provide a generic abstraction for native DD between browsers.

Faulty code:

document.addEventListener('drag', function(e) {
    console.log(e.clientX); // always Zero
}, false);

Note:

This problem doesn't happen on other events (dragstart, dragover) and the mousemove events cannot be captured while dragging something.


Solution

  • I found a solution, I've placed a listener on the "dragover" event at the document level, now I get the right X and Y properties that I can expose through a globally shared object.