HTML5: dragover(), drop(): de la façon de faire actuelle des coordonnées x,y?

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

J'ai trouvé une page web qui décrit x,y pour dragover (regardez e.offsetX et de l'e.layerX pour voir si elle est définie pour les différents navigateurs, mais pour la vie de moi, ils ne SONT PAS ensemble).

Qu'utilisez-vous pour le drop(e) de la fonction pour savoir OÙ en courant cible de dépôt, il était réellement chuté?

Je suis en train d'écrire une ligne de conception de circuits app et ma cible est grande.

Ai-je besoin de descendre de la souris au niveau de pour en savoir x,y ou n'HTML5 fourni un niveau plus élevé d'abstraction?

OriginalL'auteur Pete Alvin | 2010-03-13

  1. 21

    Les propriétés clientX et clientY doit être donnée (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;
}

    Voici une (un peu) un exemple pratique qui fonctionne dans Firefox et Chrome.

    Merci pour la démo. Savez-vous pourquoi sur Safari et Chrome lorsque le texte est en baisse, il ne reste pas exactement à la même position? L'élément traîné est décalé de quelques pixels.
    Je l'ai essayé sur Chrome (sous Windows) et je ne suis pas le voir, si vous comprendre ce que c'est s'il vous plaît laissez-moi savoir

    OriginalL'auteur robertc