pageX and pageY are always set to 0 in Firefox during the ondrag event

Question

I'm implementing a visual editor where users are allowed to drag images onto the page, and drag other images inside these previously dragged images (kind of 'add another image').

I basically only need the mouse coordinates during the drag: the element hiliting etc... I do with custom functions based on these coordinates.

The problem is, while on Webkit I can get them with event.clientX and event.clientY, under Firefox (v.16.0.1 OSX) their 'counterparts' pageX and pageY are always zero in my experience during a drag.

However, they are not zero during mouseMove.

Smart as I am, I did a

$(document).on("mouseMove",function(e){__PX=e.pageX,__PY=e.pageY});

to always have the latest pageX and pageY so I could use them inside the onDrag handler but...

the OnMouseMove does not fire during a Drag And Drop operation :( :(

Is there any way I can get the Mouse X and Y during a DnD? I'd like not to clutter my code too much, as it already works on different platforms but not on Firefox.

Does this answer your question? [Why is event.clientX incorrectly showing as 0 in firefox for dragend event?](https://stackoverflow.com/questions/11656061/why-is-event-clientx-incorrectly-showing-as-0-in-firefox-for-dragend-event) — Oleg Valter is with Ukraine, Jul 29 '21 at 11:34

score 8 · Answer 1 · edited Jul 29 '21 at 11:39

8

I found the answer here.

I've solved it like this:

(___NODRAGEVENT = $.browser.mozilla) && $(document).on("dragover", function(e) {
    e = e.originalEvent;
    ___PAGEX = e.clientX || e.pageX;
    ___PAGEY = e.clientY || e.pageY;
});

I'm really surprised and confused that onDragOver does include clientX and clientY. Why don't they populate them on the drag event?

edited Jul 29 '21 at 11:39

Oleg Valter is with Ukraine

9,619
8
37
59

answered Oct 28 '12 at 16:16

rupps

9,712
4
55
95

1

lol omg this makes total sense, WHY didn't they include this in ondrag! – Daniel Ram Aug 31 '17 at 17:37
wow the answer was from 5 years ago! i am surprised this is still needed – rupps Sep 01 '17 at 15:50
I guess a lot of already built solutions account for this, but dnd from scratch still has this issue in firefox and of course our good ol' friend IE 11. – Daniel Ram Sep 08 '17 at 17:45
Absolutely ridiculous that in 2018 Firefox makes people still resort to workarounds like this. Thanks for posting your solution though. – Keno Aug 07 '18 at 21:06
7

This answer is still valid in 2021 and nothing is changed by Firefox team – Riz Jan 06 '21 at 20:15
1

Still valid on 2022, and for `drag`. – SalahAdDin Jan 21 '22 at 22:15
1

How can we add this script to React? – SalahAdDin Jan 21 '22 at 22:22

pageX and pageY are always set to 0 in Firefox during the ondrag event

1 Answers1

Linked