如何检测两个div是否正在接触/碰撞检测

Question

我搜索了所有的谷歌和这里寻找这个，但没有找到适合我的问题的答案

(这是一个非常简单的解释)我有两个div，可以由用户移动(使用JavaScript和单击事件)，我需要检测这两个div是否是相互接触/相互连接的，如果它们要触发一个函数，我在这里看到了答案，但是它们都使用jQuery，我想使用纯JS。

可能有用的是，两个div都在css中设置了位置绝对索引和不同的z索引。

编辑:为了弄清楚，因为我的解释很差，两个div中的一个是静止的，第二个只能向Y方向移动，但是向Y方向移动的div是用一个案例动画旋转的。

Answer 1

也许有更好的方法(这不是很干燥)，但它应该有效，只需将"div1“和"div2”替换为div1：

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  let verticalMatch = true
} else{
  let verticalMatch = false
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  let horizontalMatch = true
} else {
  let horizontalMatch = false
}

if (horizontalMatch && vertialMatch){
  let intersect = true
} else {
  let intersect = false
}

Answer 2

在两个div上尝试Element.getBoundingClientRect()，使用它们的坐标，您可以执行碰撞检测

Answer 3

您可以使用Anand的这篇文章描述的过程来获得元素的计算位置。然后，您可以使用getComputedStyle() (这里的文件)获得计算出来的宽度和高度，并使用简单的不等式检查测试它们是否相交。

编辑:或者，您可以直接读取它们的位置值，因为您使用的是绝对位置。然后，您可以跳过获得元素的计算位置的更复杂的方法。