html - 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 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?

Answer 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.