Comment puis-je obtenir clientX et clientY à travailler dans mon gestionnaire d'événements « glisser » sur Firefox?

Question

Mozilla Firefox 3.x semble avoir un bug lors de l'écoute d'événement "ondrag". L'objet événement ne signale pas la position de l'objet déplacé, clientX, clientY et d'autres décalages d'écran sont tous à zéro. Ceci est tout à fait problématique que je voulais faire un élément proxy basé sur l'élément en cours de déplacement et en utilisant bien sûr, clientX et clientY pour ajuster sa position.

Je sais qu'il ya des trucs cool autour, comme setDragImage en HTML5, mais je veux fournir une abstraction générique pour DD natif entre les navigateurs.

Code défectueux:

document.addEventListener('drag', function(e) {
    console.log(e.clientX); // always Zero
}, false);

Note: Ce problème ne se produit pas sur d'autres événements (dragStart, dragover) et les événements mousemove ne peuvent être capturés tout en faisant glisser somethin'.

S'il vous plaît aider!

Answer 1

J'ai trouvé une solution, je l'ai placé un écouteur sur l'événement « dragover » au niveau du document, maintenant je reçois les propriétés droite X et Y que je peux exposer à travers un objet partagé à l'échelle mondiale.

Answer 2

L'événement de glissement dans HTML 5 n'est pas entièrement fonctionnel dans les navigateurs aujourd'huis. Pour simuler une situation de glisser-déposer n vous devez utiliser:

1. Ajouter un événement onmousedown, la fixation d'un var vrai.
2. Ajouter un événement onmouseup, que la mise en faux var.
3. Ajouter un événement onmousemove, vérifier si ce var est vrai, et si elle est, déplacez votre div selon les coordonnées.

a toujours travaillé pour moi. Si vous rencontrez des problèmes, contactez à nouveau, je peux donner quelques exemples.

bonne chance!

Answer 3

  

Je sais qu'il ya des trucs cool autour   tels que setDragImage en HTML5, mais je   vouloir fournir une abstraction générique   pour DD natif entre les navigateurs.

Mais pourquoi faire quelque chose comme ça, ne sont pas là des bibliothèques comme JQuery et Prototype disponible pour glisser-déposer croix navigateur?

Ou bien si vous souhaitez implémenter une bibliothèque DD de votre propre, vous pouvez prendre l'aide de leurs méthodes ou les étendre, à la fois comme les bibliothèques suivent paradigme orienté objet.

Cela permettra d'économiser beaucoup de temps.