HTML5: dragover(), drop(): cómo obtener las coordenadas x, y actuales?

Question

¿Cómo se determinan las coordenadas (x, y) mientras se arrastra "dragover" y después de la caída ("drop") en HTML5 DnD?

Encontré una página web que describe x, y para dragover (mira e.offsetX y e.layerX para ver si están configurados para varios navegadores pero para mi vida NO están configurados).

¿Qué se usa para la función de soltar (e) para averiguar DÓNDE en el destino actual se cayó realmente?

Estoy escribiendo una aplicación de diseño de circuitos en línea y mi objetivo de soltar es grande.

¿Debo dejar caer al nivel del mouse para averiguar x, y o HTML5 proporciona una abstracción de nivel superior?

Answer 1

Las propiedades clientXclientY y se debe establecer (en los navegadores modernos):

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 que funciona en Firefox y Chrome.