弹窗拖动需三步：mousedown时记录鼠标相对弹窗左上角偏移并preventdefault，mousemove时基于document监听并更新left/top，mouseup时清除监听；须用absolute/fixed定位，否则left/top无效。
如何用 mousedown、mousemove、mouseup 实现弹窗拖动
核心就三步：按下去时记录鼠标相对弹窗左上角的偏移，移动时计算新位置，松开时清掉监听。不能直接用 dragstart，因为原生 drag 会触发默认行为（比如拖图片），且不适用于普通 div 弹窗。
关键点在于：mousedown 中必须调用 e.preventDefault() 防止选中文本或触发浏览器默认拖拽；同时把事件监听绑定到 document 上，而不是弹窗本身——否则鼠标快速移出弹窗区域时会丢事件。
常见错误现象：
– 拖着拖着就停了（监听写在弹窗元素上，移出即失效）
– 第一次拖动没反应（没存 clientX/clientY 偏移量）
– 弹窗“瞬移”或抖动（没减去鼠标相对于弹窗左上角的初始偏移）
position: absolute 和 left/top 动态更新的配合要点
弹窗容器必须设 position: absolute 或 fixed，否则 left 和 不生效。建议用 <code>style.left 和 style.top 直接赋值，比操作 classList 或重排版更轻量。
注意边界处理：如果允许拖出视口，就不用限制；如果要求始终可见，需在 mousemove 里加判断：
const left = Math.max(0, Math.min(e.clientX - offsetX, window.innerWidth - modal.offsetWidth)); const top = Math.max(0, Math.min(e.clientY - offsetY, window.innerHeight - modal.offsetHeight));
性能影响：频繁设置 style.left/top 会触发重排。若弹窗内含大量内容，可加 transform: translate(x, y) 替代（需额外保存 transform 值，但更流畅）。
为什么不能只靠 getBoundingClientRect() 算偏移
getBoundingClientRect() 返回的是当前渲染位置，不是初始点击时的位置。拖动开始前必须立刻计算一次偏移量，公式是：
offsetX = e.clientX - modal.getBoundingClientRect().leftoffsetY = e.clientY - modal.getBoundingClientRect().top
容易踩的坑：
– 在 mousemove 里反复调用 getBoundingClientRect() 再算偏移 → 结果越来越不准
– 忽略 CSS transform 或父容器 scroll 导致的坐标偏移 → 此时应改用 modal.offsetLeft 和 modal.offsetTop（仅当父级是 relative 且无 transform 时可靠）
– 使用 pageX/pageY 而非 clientX/clientY → 页面滚动后位置错乱
移动端兼容需要补哪些事件
纯鼠标事件在手机上完全不触发。要支持触摸屏，得同时监听 touchstart、touchmove、touchend，并把 e.touches[0].clientX 当作 clientX 用。
实操建议：
– 不要写两套逻辑，封装一个 getEventPos(e) 函数统一取坐标
– touchstart 中同样要 e.preventDefault()，否则 Safari 会触发双击缩放
– 移动端没有 mouseout，所以 mouseup + touchend 都要清理 document 上的监听
– 真机测试时留意 touch-action: none 是否加在弹窗上，否则 iOS 可能拦截 touch 事件
复杂点往往不在拖动逻辑本身，而在不同设备下坐标系不一致、事件生命周期管理混乱、以及没考虑父容器的 transform/scroll 影响。这些地方一漏，拖起来就飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
