如何获取与指定可拖拽div触碰的同父级div数组？

要实现这个需求，核心是遍历目标元素的所有同层级兄弟div，逐一用重叠判断逻辑筛选出触碰的元素。你之前的重叠判断逻辑是正确的，问题在于没有遍历所有候选元素进行比对。下面是完整的实现方案：

实现思路 #

1. 拿到目标元素的父容器，获取所有同属该父元素的div子元素（作为候选集合）
2. 获取目标元素的位置矩形信息（拖拽过程中会实时更新）
3. 遍历候选集合，跳过目标元素自身，用重叠判断逻辑筛选出触碰的元素
4. 返回筛选后的元素数组

完整代码实现（TypeScript） #

function getTouchingDivs(targetDiv: HTMLDivElement): HTMLDivElement[] {
  // 获取父容器，若不存在则返回空数组
  const parentContainer = targetDiv.parentElement;
  if (!parentContainer) return [];

  // 获取父容器下所有div子元素
  const siblingDivs = Array.from(parentContainer.querySelectorAll('div'));

  // 获取目标元素的视口位置矩形
  const targetRect = targetDiv.getBoundingClientRect();

  // 筛选出与目标元素触碰的div（排除自身）
  return siblingDivs.filter(div => {
    if (div === targetDiv) return false;

    const currentRect = div.getBoundingClientRect();
    // 使用你提供的重叠判断逻辑
    const isTouching = !(
      targetRect.right < currentRect.left ||
      targetRect.left > currentRect.right ||
      targetRect.bottom < currentRect.top ||
      targetRect.top > currentRect.bottom
    );

    return isTouching;
  });
}

关键说明 #

• getBoundingClientRect()会返回元素相对于浏览器视口的位置和尺寸，拖拽过程中调用该方法能获取实时的位置信息，适合判断动态拖拽时的触碰状态
• 我们只遍历目标元素的同层级兄弟div，确保范围符合你的需求
• 筛选时跳过了目标元素自身，避免将其误加入结果数组

内容的提问来源于stack exchange，提问作者mariuslohoho