Come verificare se un elemento si sovrappone ad altri elementi?

Question

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 a 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 utilizzare .getClientRects per ottenere il limite di un elemento, ma non sono esattamente sicuro di come confrontare i limiti.

Si prega di avvisare!

Answer 1

qualcosa di simile per rect1 e rect2 recuperate tramite getBoundingClientRect():

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

spiego: se una o più espressioni nel Parenthese sono true, non c'è sovrapposizione. Se tutti sono false, ci deve essere una sovrapposizione.

Answer 2

element.getBoundingClientRect() è silenzioso nei browser moderni, fornisce un parente legato allo schermo. guardare here Che test se le caselle di delimitazione si sovrappongono, cioè geometria semplice ...

oh scusate ... trovato la tua modifica troppo tardi ...

Answer 3

In Internet Explorer precedenti alla versione 8, il restituita TextRectangle oggetto contiene le coordinate nella dimensione fisica dei pixel, mentre dalla versione 8 contiene le coordinate nella dimensione logica dei pixel.

Se è necessario il rettangolo di delimitazione dell'intero elemento, utilizzare il metodo getBoundingClientRect.

Answer 4

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)) 
    ); 
    } 
};