javascript - 如何检查两个元素是否在 vanilla JavaScript 中相交？

Question

这个问题在这里已经有了答案:





jQuery/JavaScript collision detection

(7 个回答)


5年前关闭。




我有这样的代码:

$(function() {
  var $selection = $('.selection');
  $('li').filter(function() {
    var self = $(this);
    return /* ????? */;
  }).addClass('selected');
});

.widget {
  width: 320px;
  height: 200px;
  border: 1px solid gray;
  position: absolute;
  overflow: scroll;
}
.selection {
  position: absolute;
  top: 90px;
  left: 90px;
  border: 1px dotted black;
  height: 120px;
  width: 120px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  background: blue;
  width: 40px;
  height: 40px;
  margin: 10px;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <div class="selection"></div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

如何仅选择与 .selection 矩形相交的那些 li 元素？

Answer 1

使用标准 DOM 技术，您可以遍历每个 LI 元素并获得一个边界矩形，它给出了 LI 矩形的坐标。
对选择矩形也这样做，然后您可以简单地检查坐标是否在选择范围内。

Element.getBoundingClientRect()

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

The returned value is a DOMRect object, which contains read-only left, top, right, bottom, x, y, width, height properties describing the border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

请参阅下面的编辑代码，它选择完全包含或部分与选择相交的 LI 元素。

var selection = document.querySelector(".selection");
var rectSelection = selection.getBoundingClientRect();

// Iterate over all LI elements.
[].forEach.call(document.querySelectorAll("li"), function(li) {
    var rect = li.getBoundingClientRect();

    if(rect.bottom > rectSelection.top 
    && rect.right > rectSelection.left 
    && rect.top < rectSelection.bottom 
    && rect.left < rectSelection.right) {
        li.classList.add("selected");
    }
});

.widget {
  width: 320px;
  height: 200px;
  border: 1px solid gray;
  position: absolute;
  overflow: scroll;
}
.selection {
  position: absolute;
  top: 90px;
  left: 90px;
  border: 1px dotted black;
  height: 120px;
  width: 120px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  background: blue;
  width: 40px;
  height: 40px;
  margin: 10px;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <div class="selection"></div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>