如何检查香草JavaScript中两个元素是否相交？ [英] How to check if two elements are intersecting in vanilla JavaScript?

问题描述

我有这样的代码：

$(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元素？

How can I select only those li elements that are intersecting with .selection rectangle?

推荐答案

使用标准DOM技术，您可以遍历每个LI元素

Using standard DOM techniques, you can iterate over each LI element and obtain a bounding rectangle, which gives the coordinates of the LI's rectangle.

对选择矩形也执行此操作，然后可以简单地检查坐标是否在选择范围内。

Do this for the selection rectangle too and then you can simply check whether the coordinates are within the range of the selection's.

Element.getBoundingClientRect（）

Element.getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置。

Element.getBoundingClientRect()

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

返回的值是一个DOMRect对象，它是getClientRects（）返回的矩形元素的并集，即与wi相关联的CSS边框框

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.

返回的值是一个DOMRect对象，该对象包含只读的left，top，right，bottom，x，y，width，height属性，这些属性描述了其中的边框像素。除了width和height以外的其他属性均相对于视口的左上角。

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元素的编辑代码

Please see below, the edited code which selects the LI elements that are fully contained or partially intersecting the selection.

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.top + rect.height > rectSelection.top
    && rect.left + rect.width > rectSelection.left
    && rect.bottom - rect.height < rectSelection.bottom
    && rect.right - rect.width < 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>

这篇关于如何检查香草JavaScript中两个元素是否相交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！