11

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.

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
Christophe Eblé
  • 8,071
  • 3
  • 33
  • 32
  • +1 for the comment you left. You can use the answer provided by José. I'll also try to find out something related to this, as soon as I get some time. – Kirtan May 20 '09 at 13:01
  • 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. – Christophe Eblé May 20 '09 at 13:23
  • The same bug (in my opinion) is present up through Firefox 10. Same goes for pageX and other coordinate properties. If it's not supposed to be part of this event it should be undefined, not zero right? This is very annoying. Sorry to hear you have to use the `dragover` event as a hack but at least that does work – Chris Bosco Mar 09 '12 at 04:04
  • Does this answer your question? [Drag and drop directive , no e.clientX or e.clientY on drag event in FireFox](https://stackoverflow.com/questions/23992091/drag-and-drop-directive-no-e-clientx-or-e-clienty-on-drag-event-in-firefox) – Oleg Valter is with Ukraine Jul 29 '21 at 11:53

3 Answers3

17

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.

Christophe Eblé
  • 8,071
  • 3
  • 33
  • 32
3

The drag event in HTML 5 is not fully functional in todays browsers. To simulate a drag n drop situation you should use:

  1. Add a onmousedown event, setting a var true.
  2. Add a onmouseup event, setting that var false.
  3. Add a onmousemove event, checking if that var is true, and if it is, move your div according to the coordinates.

This always worked for me. If you face any problems, get in touch again, I can provide some examples.

good luck!

José Leal
  • 7,989
  • 9
  • 35
  • 54
0

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.

But why do something like this, aren't there libraries like JQuery & Prototype available for cross browser drag & drop?

Or else if you want to implement a DD library of your own, you can take help of their methods or extend them, as both the libraries are following object oriented paradigm.

This will save much time.

Kirtan
  • 21,295
  • 6
  • 46
  • 61
  • 1
    JQuery and Prototype just provide simulated D&D which is not what I'm looking for, native DD is much more robust and fast than any other simulated solution. – Christophe Eblé May 20 '09 at 12:39