validacion - validar formulario javascript html5

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

Question

Esta pregunta ya tiene una respuesta aquí:

• jQuery / JavaScript collision detection 6 respuestas

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?

Intenté 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 aconsejame!

Answer 1

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

Answer 2

En Internet Explorer anterior a la versión 8, el objeto TextRectangle devuelto 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, use el método getBoundingClientRect .

Answer 3

element.getBoundingClientRect () es silencioso en navegadores modernos, ofrece un límite relativo a la pantalla. mira getBoundingClientRect() probar si los cuadros delimitadores se superponen, eso es geometría simple ...

Oh discúlpeme ... encontré su edición demasiado tarde ...

Answer 4

Algo así 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)

Explique: si una o más expresiones en el parenthese son true , no hay superposición. Si todos son false , debe haber una superposición.