拖拽功能必须监听mousedown、mousemove、mouseup三个鼠标事件；需在document上绑定后两者以防移出断连，用transform替代style.left避免样式冲突，移动端需处理touch事件并阻止默认行为，禁用html5 drag api以提升可控性。
拖拽功能必须监听的三个鼠标事件
实现拖拽的核心不是“拖”，而是对 mousedown、mousemove、mouseup 三个事件的协同控制。缺一不可，漏掉 mouseup 监听会导致拖拽状态永远无法释放，鼠标移出元素后仍持续响应移动。
常见错误是只在被拖元素上绑定 mousemove，结果鼠标一移出就断连。正确做法是：在 mousedown 触发后，立即将 mousemove 和 mouseup 绑定到 document 上，确保全程捕获。
-
mousedown：记录初始偏移（clientX - element.offsetLeft等），设标志位isDragging = true -
mousemove：仅当isDragging为true时计算新位置，用event.clientX - offsetX更新left和top -
mouseup：重置isDragging = false，并从document移除两个监听器（或用{ once: true }简化）
为什么不能直接用 element.style.left = ...
硬写 style.left 会覆盖内联样式中其他单位（如 %、rem），且无法兼容已存在的 CSS 动画或 transition。更严重的是：如果元素原本通过 transform: translate() 定位，再改 left 会导致定位逻辑冲突，视觉跳变。
推荐统一用 transform 实现位移，性能更好，也避免布局重排：
立即学习“Java免费学习笔记（深入）”；
element.style.transform = `translate(${x}px, ${y}px)`;注意：transform 基于元素自身坐标系，所以需在 mousedown 时读取当前 getComputedStyle(element).transform 解析出已有偏移，再叠加鼠标位移量 —— 否则每次拖拽都会重置到原点。
移动端拖拽要额外处理 touch 事件
桌面端的 mouse 事件在 iOS/Android 上默认不触发，必须显式监听 touchstart、touchmove、touchend，且 touchmove 默认行为是滚动页面，需加 event.preventDefault() 阻止。
关键差异点：
- 触点坐标用
event.touches[0].clientX替代event.clientX - 一个
touchstart可能含多个触点，务必取[0] - 不要同时监听 mouse 和 touch —— iOS Safari 会在 touch 后触发模拟 mouse 事件，造成重复执行；可用
if ('ontouchstart' in window)分支隔离
dragstart / drop 这套 HTML5 拖放 API 能不用就不用
dragstart、dragover、drop 这套 API 表面简单，实际限制极多：只能拖拽 <img alt="如何用javascript实现拖拽功能_javascript怎样处理鼠标事件" >、<a></a> 和带 draggable="true" 的元素；拖拽过程中无法自定义光标样式；无法精确控制位移像素；且 dragover 必须手动调用 event.preventDefault() 才允许 drop，稍有遗漏就失败。
真实项目中，95% 的“拖拽”需求（比如调节面板位置、排序列表项、缩放画布）都绕开这套 API，手写 mousedown+transform 更可控、更易调试、兼容性更好。
真正容易被忽略的是：拖拽过程中若触发了浏览器默认行为（如选中文本、图片被拖出窗口），会导致位移错乱。务必在 mousedown 里加 event.preventDefault()，并在元素上设置 user-select: none。
