JavaScript拖拽分mouse事件和HTML5 drag API两种：前者通过mousedown/mousemove/up手动计算坐标，兼容性好；后者需draggable="true"并配合dataTransfer，适合语义化场景。
JavaScript中实现拖拽功能，核心在于正确监听和处理 mousedown、mousemove、mouseup 三个事件（或使用现代的 dragstart/drag/dragend API），并配合鼠标坐标计算与元素定位更新。
基础拖拽：用 mouse 事件手动控制
适用于任意 DOM 元素，不依赖 HTML5 Drag & Drop API，兼容性好，控制更灵活。
- 给目标元素绑定
mousedown，记录初始偏移量（clientX - element.offsetLeft等） - 在
document上监听mousemove，实时计算新位置：left = e.clientX - offsetX - 用
mouseup或document.mouseup清除移动监听，避免鼠标松开后仍跟随 - 为防拖拽过程中鼠标移出元素区域，事件必须绑定在
document而非目标元素上
HTML5 原生拖放：dragstart/drag/dragend
语义化更强，适合文件上传、列表排序等场景，但对普通元素拖拽需额外设置 draggable="true"。
- 目标元素加
draggable="true"才能触发dragstart - 在
dragstart中用e.dataTransfer.setData()存储数据（如 ID、文本） - 拖拽经过区域需阻止
dragover默认行为（e.preventDefault()），否则drop不会触发 -
drop事件中读取e.dataTransfer.getData()完成逻辑（如插入、交换）
关键细节与避坑提醒
实际开发中容易忽略的点，直接影响体验和稳定性：
立即学习“Java免费学习笔记（深入）”；
- 拖拽时记得设置
element.style.cursor = 'grabbing'提升交互反馈 - 移动端需同时监听
touchstart/touchmove/touchend，并用touches[0]取坐标 - 避免在
mousemove中频繁操作 DOM，可节流或用transform: translate()替代修改left/top - 拖拽结束务必清理全局事件（如
document.removeEventListener('mousemove', ...)），防止内存泄漏
基本上就这些。选 mouse 方案还是 drag API，取决于需求：要自由定位用前者，要系统级拖放交互（如扔进回收站）用后者。
