JavaScript拖拽核心是mousedown→mousemove→mouseup手动控制，需计算鼠标偏移量并更新元素位置；边界限制防越界，碰撞检测用AABB判断矩形相交；推荐transform替代left/top、适配移动端、防文字选中。
JavaScript 实现拖拽功能的核心是监听鼠标（或触摸）事件，结合元素位置计算与样式更新。边界限制和碰撞检测不是拖拽的必需部分，但能显著提升交互体验和逻辑严谨性。关键在于：不直接依赖 dragstart/dragend 等原生拖放 API（它主要用于文件、链接等跨应用场景），而是用 mousedown → mousemove → mouseup 手动控制。
基础拖拽实现（含坐标转换）
拖拽的本质是让元素随鼠标移动，需解决两个问题：鼠标按下时的偏移量（offset）、以及实时更新元素的 left/top（或 transform）。
- 在
mousedown中记录鼠标相对于元素左上角的偏移：dx = e.clientX - el.offsetLeft，dy = e.clientY - el.offsetTop - 绑定
mousemove，计算新位置：newLeft = e.clientX - dx，newTop = e.clientY - dy - 用
el.style.left = newLeft + 'px'更新（注意元素需为position: absolute或relative） - 务必在
mouseup或mouseleave时解绑mousemove/mouseup，避免“粘滞拖拽”
边界限制：防止元素拖出容器
边界限制即限定元素的 left 和 top 取值范围。需明确“边界”是谁的——通常是父容器（如 .container），而非整个视口。
- 获取父容器尺寸：
const rect = container.getBoundingClientRect() - 计算允许的最小/最大 left 值：
minLeft = rect.left，maxLeft = rect.right - el.offsetWidth - 同理计算 top 范围：
minTop = rect.top，maxTop = rect.bottom - el.offsetHeight - 在每次
mousemove中约束位置：newLeft = Math.max(minLeft, Math.min(maxLeft, newLeft))
简单碰撞检测：判断是否进入目标区域
碰撞检测在拖拽中常用于高亮放置区、自动吸附或阻止重叠。最常用的是矩形 AABB（Axis-Aligned Bounding Box）检测——判断两个无旋转矩形是否相交。
立即学习“Java免费学习笔记（深入）”；
- 获取被拖元素和目标元素的
getBoundingClientRect() - 设 A 为拖拽元素，B 为目标元素，则相交条件为：
A.left B.left && A.top B.top - 可在
mousemove中实时检测，满足则添加class="over"或触发回调；离开时清除状态 - 若需“松手即放置”，应在
mouseup时再次检测，并执行业务逻辑（如 appendChild、交换位置等）
优化建议与注意事项
真实项目中还需考虑兼容性、性能和体验细节：
- 使用
transform: translate(x, y)替代left/top更流畅（尤其配合 will-change 或 GPU 加速） - 移动端需同时处理
touchstart/touchmove/touchend，并调用e.preventDefault()阻止默认滚动 - 避免在
mousemove中频繁读写 DOM，可先计算再批量更新；必要时用requestAnimationFrame节流 - 拖拽过程中禁用文字选中：
el.style.userSelect = 'none'，并在结束时恢复
