Wie Elemente visuell unter div

Question

abgerufen werden Ich versuche, ein Array von Bildern unter einem absolut positionierten Div in jQuery oder Javascript abgerufen. Eine Art Auswahl. Ich habe es mit ".getElementsByPoint" versucht, aber da es nur x, y erlaubt, bin ich ein wenig verwirrt, wie ich die Höhe und Breite inkorrekte, und bekomme alles in der Gegend.

Hoffe jemand hat ein paar Vorschläge, um mich aus meinen Schwierigkeiten zu ziehen.

Ich habe ein kurzes Bild gemalt, um zu veranschaulichen, was ich meine.

Answer 1

Ich habe in reiner JS beantwortete die Antwort relevant in nicht jQuery Umgebungen zu machen, aber natürlich mit jQuery können die Wähler ersetzt werden und die for-Schleife kann mit einem .each() ersetzt werden. Wenn das div-Objekt ein jQuery-ziehbares Element oder etwas Ähnliches ist, kann die getSelected-Funktion als Callback für das verschobene div verwendet werden. Hier

ist die jsFiddle: https://jsfiddle.net/r11h1tjq/2/

Wenn Sie die absolute Position des div einstellen und ausführen, sehen Sie nur die Bilder, die div schneiden, „ausgewählt“.

HTML

<div id="select"></div> 
<img src="http://placehold.it/200x200" class="intersect" alt="" /> 
<img src="http://placehold.it/200x200" class="intersect" alt="" /> 
<img src="http://placehold.it/200x200" class="intersect" alt="" /> 
<img src="http://placehold.it/200x200" class="intersect" alt="" /> 

CSS

#select { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    top: 175px; 
    right: 0; 
    border: 3px dashed #000000; 
} 

.selected { 
    border:1px solid #ff0000; 
} 

img { 
    border: 0; 
} 

JAVASCRIPT

function getSelected() { 
    var inBox = [] 
    var divBox = document.getElementById("select").getBoundingClientRect() 
    var images = document.getElementsByClassName("intersect") 
    for (var i = 0; i < images.length; i++) { 
    var imageBox = images[i].getBoundingClientRect() 
    var overlap = !(divBox.right < imageBox.left || 
     divBox.left > imageBox.right || 
     divBox.bottom < imageBox.top || 
     divBox.top > imageBox.bottom) 
    if (overlap) { 
     inBox.push(images[i]) 
    } 
    } 
    return inBox 
} 


var selected = getSelected() 
for (var j = 0; j < selected.length; j++) { 
    selected[j].className += " selected"; 
}