Détecter la position d'un div

Question

J'ai créé un petit jeu, dans lequel certains blocs se déplacent autour d'un div principal. La souris qui tenait aussi un div (j'avais assigné la position du curseur à cette div).

Je veux juste tracer, si le curseur div se déplace sur les blocs (ce sont aussi div). Si cela arrive, le jeu sera terminé.

Comment puis-je détecter si le div ou le curseur se déplace l'un sur l'autre?

Answer 1

Si vous utilisez jQuery, vous pouvez trouver la gauche, en haut, la largeur et la hauteur d'une div en utilisant ces:

$(myDiv).offset().left 
$(myDiv).offset().top 
myDiv.offsetWidth 
myDiv.offsetHeight 

les utiliser pour travailler sur la gauche, à droite, en haut et en bas de chaque div. Puis deux divs se chevauchent si:

left1 < right2 && left2 < right1 && top1 < bottom2 && top2 < bottom1 

Answer 2

Ce n'est pas une tâche simple en utilisant javascript simple, parce que vous devez retracer l'ascendance de div et additionner les positions relatives jusqu'à ce que vous trouviez un div absolument positionné. D'autre part, cette tâche est assez triviale avec une bibliothèque javascript telle que jQuery ou Prototype. Dans jQuery, par exemple, $(myDiv).offset() renvoie la position div par rapport au document.

Si vous incluez également jQuery UI, et faites votre principal div un « Draggable », et tous les autres divs « largable », tout ce que vous avez besoin est de brancher sur le Droppable's over event pour être averti quand le principal div est déplacé sur l'autre .

Answer 3

Le concept que vous parlez est appelé collision detection. Très simplement, vous devez obtenir les limites de votre div puis faire une boucle dans tous les blocs pour voir s'ils se chevauchent.

Answer 4

getBoundingClientRect()

John Resig a un grand article ici: getBoundingClientRect is Awesome

Answer 5

Si vous ne souhaitez pas utiliser jQuery vous pouvez copier/coller à partir d'ici (code LGPL); http://code.google.com/p/ra-ajax/source/browse/trunk/Ra/Js/Ra.js

L'endroit à rechercher est la fonction "absolutize" à la ligne no. 220 qui calcule récursivement la taille des "nœuds ancêtres" dans la boucle while.

Collé ici pour des références;

var valueT = this.offsetTop || 0; 
var valueL = this.offsetLeft || 0; 
var el = this.offsetParent; 

while (el) { 
    Ra.extend(el, Ra.Element.prototype); 
    if(el.tagName == 'BODY') { 
    break; 
    } 
    var pos = el.getStyle('position'); 
    if(pos == 'relative' || pos == 'absolute') { 
    break; 
    } 
    valueT += el.offsetTop || 0; 
    valueL += el.offsetLeft || 0; 
    el = el.offsetParent; 
} 

« ce » ici est un élément DOM ...

Cependant, je pense que ce que vous avez est absolument positionné à l'intérieur divs autre div avec position: relative dans ce cas, vous pouvez simplement utiliser;

var y = parseInt(myElement.style.top, 10); 
var x = parseInt(myElement.style.left, 10); 

qui sera ordres de grandeur plus rapide, puis faire le « décalage boucles » ...