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.

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.

• javascript
• firefox
• events
• drag-and-drop

• Does this answer your question? Why is event.clientX incorrectly showing as 0 in firefox for dragend event? – 0Valt Commented Jul 29, 2021 at 11:34

1 Answer 1

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?