¿Cómo comprobar si un elemento se superpone a otros elementos?

Question

Tengo dos elementos div. Cada uno de ellos tiene 450px de ancho y alto. ¿Cómo puedo verificar si el primer div se superpone al segundo div?

He intentado usar javascript hittest, pero es un poco complicado. Como estoy tratando de descubrir cómo funciona realmente, me gustaría comenzar con un código más simple.

Descubrí que puedo usar .getClientRects para obtener el límite de un elemento, pero no estoy muy seguro de cómo comparar los límites.

Por favor, ¡avísenme!

Answer 1

Algo como esto para rect1 y rect2 recuperado a través de getBoundingClientRect():

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

Explicar: si una o más expresiones en el paréntesis que son true, no hay solapamiento. Si todos son false, debe haber una superposición.

Answer 2

element.getBoundingClientRect() es muy bueno en los navegadores modernos, ofrece un límite en relación con la pantalla. mirar here que la prueba si las dimensiones de las cajas se superponen, es decir geometría simple ...

oh ... discúlpame encontrado su edición demasiado tarde ...

Answer 3

En Internet Explorer anterior a la versión 8, la devolvió TextRectangle objeto contiene las coordenadas en tamaño de píxel físico, mientras que a partir de la versión 8, contiene las coordenadas en tamaño de píxel lógico.

Si necesita el rectángulo delimitador de todo el elemento, utilice el método getBoundingClientRect.

Answer 4

Aquí hay algo que hice hace algunos días: 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)) 
    ); 
    } 
};