javascript - test - Come verificare se un elemento si sovrappone ad altri elementi?




regular expression online (3)

Questa domanda ha già una risposta qui:

Ho due elementi div. Ognuno di essi ha una larghezza e un'altezza di 450 px. Come posso verificare se il primo div si sovrappone al secondo div?

Ho provato ad usare javascript hittest, ma è un po 'complicato. Dato che sto cercando di scoprire come funziona, vorrei iniziare con un codice più semplice.

Ho scoperto che posso usare .getClientRects per ottenere il limite di un elemento, ma non sono esattamente sicuro di come confrontare i limiti.

Per favore consigliami!


Ecco qualcosa che ho fatto qualche giorno fa: 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))
    );
  }
};

In Internet Explorer precedente alla versione 8, l'oggetto TextRectangle restituito contiene le coordinate nella dimensione fisica dei pixel, mentre dalla versione 8 contiene le coordinate nella dimensione logica dei pixel.

Se hai bisogno del rettangolo di delimitazione dell'intero elemento, usa il metodo getBoundingClientRect .


Qualcosa del genere per rect1 e rect2 recuperati tramite getBoundingClientRect() :

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

Spiega: se una o più espressioni nella parentesi sono true , non c'è sovrapposizione. Se tutti sono false , ci deve essere una sovrapposizione.





boundary