关键在于每帧调用 getBoundingClientRect 获取被拖元素实时视口坐标，结合临界距离判断吸附时机，而非缓存初始值；需在 dragover/mousemove 中动态计算，确保边界处理稳定、反馈及时。
用 getBoundingClientRect 实现拖拽吸附，关键不是“算得准”，而是“判断时机准、边界处理稳、吸附反馈及时”。它本身不提供拖拽，但能精准给出元素在视口中的实时位置，是吸附逻辑的坐标基石。
用 getBoundingClientRect 获取实时相对视口坐标
拖拽中每帧调用 element.getBoundingClientRect()，得到 { top, left, right, bottom, width, height }。注意：这些值是相对于当前视口（viewport）的像素值，自动包含滚动偏移，无需手动加 window.scrollX/Y。
常见误区：在 dragstart 里缓存一次 rect，后续一直用——这会导致吸附失效，因为元素 DOM 位置未变（仍固定），但视觉上已随鼠标移动。正确做法是在 dragover 或 mousemove 回调中**每一帧重新获取被拖元素的 rect**（如果是拖拽克隆节点，则获取克隆体的 rect）。
定义吸附目标与临界距离（snap threshold）
吸附不是“贴死”，而是当被拖元素某条边进入目标元素某条边的一定像素范围内时，强制对齐。这个“一定像素”就是临界距离，通常设为 4–12px，太小难触发，太大易误吸。
例如：想让被拖元素的 left 边 吸附到目标元素的 left 边，条件是：Math.abs(dragRect.left - targetRect.left) <br>
满足时，将被拖元素的 <code>left 设为 targetRect.left（需结合定位方式，如 transform 或 left/top）。
你需要检查的边组合包括：
- 拖拽元素的 left ↔ 目标元素的 left / right
- 拖拽元素的 right ↔ 目标元素的 left / right
- 拖拽元素的 top ↔ 目标元素的 top / bottom
- 拖拽元素的 bottom ↔ 目标元素的 top / bottom
每次只选一个“最优吸附”（即距离最小的那个），避免多边同时触发导致抖动。
规避吸附抖动与循环触发
直接设置 element.style.left/top 可能引发布局重排，且在下一帧 getBoundingClientRect 中立刻反映新位置，造成“刚吸上又检测到更近”的震荡。推荐方案：
- 用
transform: translate(x, y)移动被拖元素（性能好、不影响文档流） - 记录原始鼠标偏移（
clientX - rect.left），拖拽中基于该偏移 + 吸附修正值计算最终translate - 引入防抖状态：一旦发生吸附，下 50ms 内忽略同方向的再次吸附判断
- 排除自身：确保目标元素不是被拖元素或其祖先，避免 self-snap
支持滚动容器内的吸附（如 overflow: auto 的面板）
如果吸附目标在可滚动容器内，而容器本身不在视口顶部，getBoundingClientRect 返回的仍是相对于顶层视口的值，但目标的实际“可吸附参考系”应是该容器的 content 区域。
解决方法：
- 对每个目标元素，先调用
targetElement.closest('[data-snap-container]')找到它的吸附上下文容器 - 获取该容器的
getBoundingClientRect()，再用targetRect.top - containerRect.top换算成容器内坐标 - 被拖元素也统一换算到同一容器坐标系下再比较（减去容器 scrollTop/scrollLeft）
这样，即使容器滚动，吸附关系依然稳定，不会因视口位移而断连。
不复杂但容易忽略：吸附是体验细节，重点不在算法多精巧，而在临界值合理、反馈可视（比如吸附时加个轻微缩放或边框高亮）、以及退出吸附时有平滑过渡（如加个 easing 还原）。用好 getBoundingClientRect，你就握住了空间关系的真相。
