检测重叠元素

Question

我有一些具有相同父级的可拖动 div。 我如何获取与另一个指定 div 相接触的 div 数组？

例如：

let item1:HTMLDivElement;

let touchingDivs:HTMLDivElement[] = getTouchingDivs(item1);

我尝试过类似的事情

var overlap = !(rect1.right < rect2.left ||rect1.left > rect2.right ||rect1.bottom < rect2.top || rect1.top > rect2.bottom)

https://stackoverflow.com/a/12067046/20522485

但它不起作用，因为我不知道哪两个已识别的元素会相互接触

Answer 1

使用功能

getTouchingDivs(item1)

。该函数比较 item1 的同级 div 和矩形。之后使用

getBoundingClientRect()

函数，根据与 item1 重叠的位置和大小返回 div 数组。这是例子：

function getTouchingDivs(item) {
    let touchingDivs = [];
    let itemRect = item.getBoundingClientRect();
    let siblingDivs = item.parentNode.children;

    for (let div of siblingDivs) {
        if (div !== item) {
            let divRect = div.getBoundingClientRect();
            let overlap = !(itemRect.right < divRect.left || itemRect.left > divRect.right || itemRect.bottom < divRect.top || itemRect.top > divRect.bottom);
            if (overlap) {
                touchingDivs.push(div);
            }
        }
    }
    return touchingDivs;
}

let item1 = document.getElementById("yourDivId"); // Replace with your div's ID
let touchingDivs = getTouchingDivs(item1);