HTML5: dragover(), drop(): comment obtenir les coordonnées x, y actuelles?

Question

Comment détermine-t-on les coordonnées (x, y) en faisant glisser "dragover" et après le drop ("drop") en HTML5 DnD?

J'ai trouvé une page Web qui décrit x, y pour le glissement (regardez e.offsetX et e.layerX pour voir si défini pour différents navigateurs mais pour la vie de moi ils ne sont pas réglés).

Qu'est-ce que vous utilisez pour la fonction drop (e) pour savoir O WH, dans la cible de largage actuelle, elle a été supprimée? Je suis en train d'écrire une application de conception de circuit en ligne et ma cible de baisse est grande. Dois-je passer au niveau de la souris pour trouver x, y ou est-ce que HTML5 a fourni une abstraction de plus haut niveau?

Answer 1

Les propriétés clientX et clientY doit être réglé (dans les navigateurs modernes):

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 qui fonctionne dans Firefox et Chrome.