Jquery | Ottieni elementi div in un'area definita

Question

c'è un modo semplice per inserire completamente gli elementi div in un'area definita?

Esempio:

<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> 

ho ottenuto 4 scatole (grigio) e sono in grado di ridimensionare una div (rosso in cima a tutte le caselle). Dopo il ridimensionamento, desidero sapere quali elementi div si adattano completamente a quest'area.

Qualcuno sa come farlo? C'è un metodo o una funzione in JQUERY?

Answer 1

Mi sembra che il plug-in withinBox possa aiutare a risolvere questo problema (jquery.fn.withinBox). È possibile utilizzare il codice come questo:

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

Answer 2

Non penso che ci sia già una soluzione completa per questo. Secondo questo può essere diverso.

Ma è possibile utilizzare la funzione document.elementFromPoint per quello.

Conoscendo la posizione assoluta di ridimensionabile div è possibile creare una mappa di coordinate e quindi vedere quali elementi sono sotto quello div.

Answer 3

Cosa farei con JQuery è un ciclo tra tutti gli elementi per verificare, ottenendo il loro valore .offset(), più larghezza e altezza.

Poi per ogni elemento Prendo questi quattro valuyes:

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

farò usare questi valori per controllare i seguenti quattro punti (ancora per ogni elemento per verificare)

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

Purché abbiamo fatto lo stesso tring con il DIV "coprente" (recuperando i suoi quattro angoli xd1, yd1, xd2, yd2), ragionerò in questo modo:

Se uno o più di questi punti rientra nel mio DIV "di copertura", quindi considera il DIV "coperto".

Edit: Io non sapevo che ci fosse un plugin per questo, credo che sia meccanica interna sono come la mia, ma scommetto che è una soluzione più semplice della mia :)