mousedown时应通过getBoundingClientRect()计算鼠标相对元素左上角的偏移并存储；mousemove中用transform:translate()更新位置并启用GPU加速；mouseup和mouseleave需绑定document以防事件丢失；移动端需兼容touch事件，取touches[0]坐标并判断单点触控。
mousedown 时如何正确获取元素初始偏移量
拖拽的起点判断不能只靠 event.clientX 和 event.clientY，否则在元素有 margin、transform 或父容器 scroll 时会错位。必须计算鼠标相对于被拖拽元素左上角的偏移（offsetX/offsetY），但注意：这些属性在某些旧浏览器中不兼容，更稳妥的做法是用 getBoundingClientRect() 手动算：
- 在
mousedown回调里立即调用element.getBoundingClientRect() - 用
event.clientX - rect.left得到startX，同理得startY - 把这两个值存到闭包或
element.dataset中，供后续mousemove使用
mousemove 中怎样更新位置才不抖动
直接用 left/top 配合 position: absolute 是常见写法，但容易因布局重排导致卡顿；更稳的方式是用 transform: translate()：
- 确保元素初始有
position: relative或absolute，且未设left/top冲突值 - 在
mousemove里计算：currentX = event.clientX - startX，currentY = event.clientY - startY - 用
element.style.transform = `translate(${currentX}px, ${currentY}px)`更新 - 务必加
will-change: transform或backface-visibility: hidden触发 GPU 加速
为什么 mouseup 绑定在 document 上而不是元素本身
如果只在拖拽元素上监听 mouseup，鼠标快速移出元素区域后松手，事件就收不到，拖拽会“粘住”。必须把 mouseup 和 mouseleave（兜底）绑定到 document：
-
document.addEventListener('mouseup', handleMouseUp)，并在里面清除所有监听器 - 同时建议加
document.addEventListener('mouseleave', handleMouseUp)，防鼠标意外移出窗口 - 记得在
handleMouseUp里调用document.removeEventListener，避免内存泄漏
移动端 touch 事件怎么兼容
纯 mousedown/mousemove 在手机上完全不触发。要支持触屏，得同时处理 touchstart/touchmove，且注意触摸点是数组：
立即学习“前端免费学习笔记（深入）”；
-
touchstart中取event.touches[0]获取第一个触点坐标，其余逻辑和mousedown一致 -
touchmove同样取touches[0]，并加event.preventDefault()阻止页面滚动 - 别忘了在
touchend里清理监听，且它对应的是mouseup的角色 - 可以用
'ontouchstart' in window做简单判断，但更推荐统一监听三套事件并按需触发
真正麻烦的是边界检测和多点触控干扰——比如用户双指缩放时不该触发拖拽，这需要额外判断 event.touches.length === 1。
