web-dev-qa-db-fra.com

Comment vérifier si un élément chevauche d'autres éléments?

J'ai deux éléments div. Chacun d'eux a une largeur et une hauteur de 450 pixels. Comment vérifier si le premier div chevauche le deuxième div?

J'ai essayé d'utiliser javascript hittest, mais c'est un peu compliqué. Puisque j'essaye de découvrir comment cela fonctionne réellement, je voudrais commencer avec un code plus simple.

J'ai découvert que je peux utiliser . GetClientRects pour obtenir la frontière d'un élément, mais je ne sais pas exactement comment comparer les frontières.

Conseillez-moi, s'il-vous-plaît!

javascriptboundary
47
Moon

Quelque chose comme ça pour rect1 et rect2 récupéré via getBoundingClientRect () :

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

Expliquez: si une ou plusieurs expressions entre parenthèses sont true, il n'y a pas de chevauchement. Si tous sont false, il doit y avoir un chevauchement.

85
Buu Nguyen

Voici quelque chose que j'ai fait il y a quelques jours: https://Gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};
14
yckart

element.getBoundingClientRect () est assez bon dans les navigateurs modernes, délivre une limite par rapport à l'écran. regardez ici Ensuite, testez si les boîtes englobantes se chevauchent, c'est-à-dire une géométrie simple ...

oh excusez-moi ... trouvé votre montage trop tard ...

2
philipp

Dans Internet Explorer antérieur à la version 8, l'objet TextRectangle renvoyé contient les coordonnées en taille de pixel physique, tandis qu'à partir de la version 8, il contient les coordonnées en taille de pixel logique.

Si vous avez besoin du rectangle englobant de l'élément entier, utilisez la méthode getBoundingClientRect .

1
Vishal Suthar