Jquery | Obtenga elementos div en el área definida

Question

¿hay alguna manera sencilla de ajustar los elementos div por completo en un área definida?

Ejemplo:

<div id="redbox"> RESIZE DIV </div> 

<div id="grid"> 
    <div id="box1"></div> 
    <div id="box2"></div> 
    <div id="box3"></div> 
    <div id="box4"></div> 
</div> 

Tengo 4 Cajas (gris) y yo soy capaz de cambiar el tamaño de un div (rojo en la parte superior de todas las cajas). Después de cambiar el tamaño, quiero saber cuáles de los elementos div se ajustan completamente en esta área.

¿Alguien sabe cómo hacer esto? ¿Hay un método o función en JQUERY?

Answer 1

Me parece que el complemento withinBox podría ayudarlo a resolverlo (jquery.fn.withinBox). Se podría utilizar el código como el siguiente:

var area = $('#redbox'), 
    offset = area.offset(), 
    selected = $('#grid div').withinBox(offset.left, 
             offset.top, 
             area.width(), 
             area.height() 
             ); 

Answer 2

No creo que haya una solución completa para esto. De acuerdo que esto puede ser diferente.

Pero puede usar la función document.elementFromPoint para eso.

Conociendo la posición absoluta del tamaño div se puede crear un mapa de coordenadas y luego ver qué elementos de ese div.

Answer 3

lo que he hecho con jQuery es recorrer todos los elementos para comprobar, consiguiendo su valor .offset(), más ancho y altura.

Luego, para cada elemento voy a conseguir estos cuatro valuyes:

X1 (offset().top) 
Y1 (offset().left) 
X2 (= X1 + width) 
Y2 (= Y1 + height) 

voy a utilizar estos valores para comprobar los siguientes cuatro puntos (siendo para cada elemento para comprobar)

x1,y1 x1,y2 x2,y2 x2,y1 (the four corners) 

Siempre hemos hecho el mismo truco con el DIV "cubriendo" (recuperando sus cuatro esquinas xd1, yd1, xd2, yd2), razonaré así:

Si uno o más cae en mi DIV "cubriendo", entonces considere DIV "cubierto".

Editar: yo no sabía que había un plugin para que, supongo que es mecánica interna son como la mía, pero apuesto a que es una solución más sencilla que la mía :)