检测两元素是否“快对齐”需设定容忍阈值（如5px），拖拽中持续计算二者四边距离绝对值，如math.abs(el1rect.left - el2rect.left) ≤ 阈值即判定为对齐。
HTML里没有原生对齐辅助线，得靠CSS+JS模拟
浏览器渲染层不提供“辅助线”这种UI反馈机制，所谓“拖拽对齐辅助线”，本质是监听元素位置变化，在接近参考线（如父容器边缘、其他元素边界）时动态绘制临时线条并触发吸附逻辑。纯HTML做不到，必须组合 getBoundingClientRect()、mousemove 和绝对定位的 div 线条元素。
怎么用JS检测两个元素是否“快对齐”了
关键不是像素完全相等（那几乎不可能），而是定义一个容忍阈值（比如 5px），在拖拽中持续比对目标元素与参考元素的四条边（top/left/right/bottom）距离：
- 计算
Math.abs(el1Rect.left - el2Rect.left) → 左边对齐提示 - 同理判断
top（顶部对齐）、el1Rect.right - el2Rect.right（右边对齐）、el1Rect.bottom - el2Rect.bottom（底部对齐） - 注意：参考元素必须是同一坐标系下的——都相对于视口（用
getBoundingClientRect）或都相对于父容器（用offsetTop/offsetLeft，但需确保无 transform 干扰） - 常见坑：
transform: translate()会让offsetTop失效，必须用getBoundingClientRect()
辅助线DOM怎么画才不卡、不遮挡、不误判
不能每帧都 document.createElement('div')，应该预先创建4条线（上/下/左/右），用 display: none 控制显隐，仅更新 style.left/top/width/height：
- 水平线：
width: '100vw'+height: '1px'+top: Y + 'px' - 垂直线：
width: '1px'+height: '100vh'+left: X + 'px' - 避免用
z-index过高——否则会盖住可拖拽手柄；推荐z-index: 999，且确保拖拽层z-index更高（如1000） - 更关键的是：鼠标移动时只重绘“当前触发对齐”的那1–2条线，别4条全刷
拖拽吸附时要不要真的改元素位置
要，但得克制。用户拖到离参考边 5px 内时，视觉上“卡”过去，但不能直接暴力设 style.left = refRect.left + 'px' ——这会破坏原始偏移量，松手后可能跳变：
- 正确做法：记录初始拖拽起点和当前位移，吸附时只微调最终位置（例如：原计算位置是
102px，参考边在100px，就设成100px；但保留原始102px用于后续计算差值） - 必须在
mouseup后清除所有辅助线display: none，否则残留线条会干扰下次拖拽 - 移动端要注意
touchmove的preventDefault调用时机，否则页面会意外滚动
最易被忽略的一点：辅助线的触发阈值（如 5px）和吸附强度（是否强制贴死）必须可配，不同场景需要不同灵敏度——UI搭建工具要宽松，像素级设计稿编辑器就得严苛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
