javascript - 如何检索可视化放置在 div 下的元素

Question

我试图在 jQuery 或 javascript 中检索放置在绝对定位 div 下的图像数组。一种选择。我试过使用“.getElementsByPoint”，但因为它只允许 x、y，所以我有点困惑如何合并高度和宽度，并获取该区域中的所有内容。

希望有人能给我一些建议，让我摆脱困境。

我画了一张图来说明我的意思。

Answer 1

我已经用纯 JS 回答，使答案在非 jQuery 环境中相关，但当然可以使用 jQuery 替换选择器，并且可以用 .each() 替换 for 循环。此外，如果 div 是一个 jQuery 可拖动或类似的东西，getSelected 函数可以作为被移动的 div 的回调。

这是 jsFiddle: https://jsfiddle.net/r11h1tjq/2/

如果调整 div 的绝对位置并运行，您将看到只有那些与 div 相交的图像被“选中”。

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