HTML5: dragover(), drop(): how get current x,y coordinates?

Question

How does one determine the (x,y) coordinates while dragging \"dragover\" and after the drop (\"drop\") in HTML5 DnD?

I found a webpage that describes x,y for dragove

Answer 1

To build on top of robertc's answer and work around the issue:

The clientX and clientY are going to be inaccurate proportional to the distance of the cursor from the upper left corner of the element which was dropped.

You may simply calculate the delta distance by subtracting the client coords recorded at dragStart from the client coords recorded at dragEnd. Bear in mind the the element which was dropped still has the exact same position at dragEnd which you may update by the delta distance to get the new left and top positional coordinates.

Here's an demo in react, although the same can be accomplished in plain JS.

Answer 2

The properties clientX and clientY should be set (in modern browsers):

function drag_over(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}
function drop(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}

Here's a (somewhat) practical example that works in Firefox and Chrome.