JavaScript拖拽核心依赖mousedown→mousemove→mouseup事件链，需坐标计算与样式控制；IE8及以下需用attachEvent、setCapture和offsetLeft兼容；移动端须改用touch事件并阻止默认行为；现代推荐Drag and Drop API或SortableJS等库。
JavaScript 实现拖拽功能核心靠 mousedown → mousemove → mouseup 事件链，配合元素坐标计算和样式控制。现代浏览器普遍支持，但旧版 IE（尤其是 IE8 及以下）和部分移动端存在关键兼容性差异。
基础拖拽实现（PC 端）
使用原生事件监听即可完成基本拖拽：
- 在目标元素上监听
mousedown，记录鼠标相对元素的偏移（clientX - element.offsetLeft等） - 绑定
mousemove到document（防止鼠标快速移动导致脱离元素），实时更新元素left/top（需设为position: absolute或fixed） - 监听
mouseup清除mousemove和mouseup监听器，避免内存泄漏 - 注意：触发
mousedown时调用event.preventDefault()，防止文本选中或图片拖出页面
IE8 及更早版本的兼容要点
IE8 不支持 getBoundingClientRect()、pageX/pageY，且事件对象属性不同：
- 用
event.clientX + document.documentElement.scrollLeft模拟pageX - 获取元素位置优先用
offsetLeft/offsetTop，而非getBoundingClientRect - IE 中
mousemove在元素外可能不触发，需确保绑定到document并启用setCapture()（IE 特有）：在mousedown后调用element.setCapture()，mouseup后调用releaseCapture() - IE6–8 不支持
addEventListener，需用attachEvent（如element.attachEvent('onmousedown', handler)），并注意this指向问题
移动端拖拽的特殊处理
触摸屏无鼠标事件，必须改用 touchstart/touchmove/touchend：
立即学习“Java免费学习笔记（深入）”；
-
touchstart中取touches[0].clientX/clientY计算偏移 -
touchmove中阻止默认行为（event.preventDefault()），否则页面会滚动 - 注意多点触控：始终用
touches[0]（主触点），避免手势冲突 - iOS Safari 12+ 对
touchmove的默认滚动抑制更严格，有时需同时设置css: touch-action: none在拖拽容器上
现代方案推荐：Drag and Drop API 与第三方库
原生 Drag and Drop API（dragstart/dragover/drop）语义强但限制多：
- 仅支持元素、文本、文件等“可拖数据”，不能任意控制位置（比如自由拖拽 div）
- IE10+、Edge、Chrome、Firefox 支持良好，但 Safari 对
dragover阻止默认行为要求严格（必须在dragover中调用preventDefault()才能触发drop） - 实际项目中建议用轻量库统一处理，如 react-beautiful-dnd（React）、SortableJS（通用），它们已封装了各平台兼容逻辑
不复杂但容易忽略：拖拽中要持续更新样式（如加 cursor: grabbing）、考虑缩放页面（window.devicePixelRatio）、边界限制和防抖（高频 mousemove 下性能优化）。
