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

Question

我已经在 Google 和此处进行了搜索，但没有找到适合我的问题的答案

(这是一个非常简单的解释) 我有两个 div 可以被用户移动(使用 JavaScript 和点击事件)我需要检测这两个 div 是否相互接触/重叠，以及它们是否要触发一个功能我在这里看到了答案但是他们都用jQuery，我想用纯JS

可能有用的是两个 div 都在 css 中设置了绝对位置和不同的 z-index

编辑:澄清一下，因为我的解释很差，两个 div 中的一个是固定的，第二个只能在 Y 方向上移动，但是在 Y 方向上移动的 div 正在使用案例动画旋转

Answer 1

可能有更好的方法(这不是很干)但它应该可以工作，只需用您的 div ID 替换“div1”和“div2”:

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
}