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

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 dragover (look at e.offsetX and e.layerX to see if set for various browsers but for the life of me they ARE NOT set).

What do you use for the drop(e) function to find out WHERE in the current drop target it was actually dropped?

I'm writing an online circuit design app and my drop target is large.

Do I need to drop down to mouse-level to find out x,y or does HTML5 provided a higher level abstraction?

Solution 1:

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.

Solution 2:

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.