需在 mousedown 时计算鼠标相对元素的 offsetX/offsetY 并复用，避免 mousemove 中重复调用 getBoundingClientRect()；边界限制应基于 getBoundingClientRect() 获取的视口坐标；mouseup 需捕获监听并兜底防卡死；移动端 touchstart 必须 preventDefault 且 passive: false。

拖拽时元素突然跳到鼠标位置，怎么 fix getBoundingClientRect() 偏移？

这是最常见问题：用户点击元素某处（比如右下角），一拖动，元素左上角就“啪”地贴到鼠标指针上。根本原因是没校准鼠标相对于元素的初始偏移量。

正确做法是在 mousedown 事件里立刻计算：

const rect = target.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;

容易踩的坑：

• 用 target.offsetLeft 或 style.left 替代 getBoundingClientRect() —— 它们不包含 transform、滚动偏移和 CSS layout 影响，结果错得离谱
• 在 mousemove 里重复调用 getBoundingClientRect() 计算偏移 —— 不仅多余，还会因布局重排导致卡顿

如何让拖拽在父容器内受限，又兼容 transform 和 overflow: hidden？

限制边界不能只看 parent.clientWidth，必须考虑：父容器是否有 transform（影响坐标系）、是否设置了 overflow: hidden（视觉裁剪但不改变 layout 尺寸）、子元素是否用了 position: absolute 或 fixed。

推荐方案是统一用视口坐标做判断：

const parentRect = parent.getBoundingClientRect();
const minX = parentRect.left + offsetX;
const maxX = parentRect.right - (targetRect.width - offsetX);
const minY = parentRect.top + offsetY;
const maxY = parentRect.bottom - (targetRect.height - offsetY);
const left = Math.max(minX, Math.min(e.clientX - offsetX, maxX));
const top = Math.max(minY, Math.min(e.clientY - offsetY, maxY));

注意点：

• offsetX/offsetY 是 mousedown 时算出的固定值，不是实时变的
• 如果父容器有 transform: scale(0.8)，getBoundingClientRect() 已自动按缩放折算，无需手动除以 scale
• 别用 scrollWidth/scrollHeight 判断边界——那是可滚动区域尺寸，不是可视边界

为什么松手后 mouseup 在 iframe 或弹窗外就失效？

因为 mouseup 事件只触发在鼠标抬起时所在的 DOM 节点上。如果拖拽过程中鼠标划出当前窗口（比如进了 、浏览器 DevTools、系统级弹窗），原页面就收不到 mouseup，导致拖拽状态“卡死”。

解法是改用事件捕获 + 全局监听：

• 在 mousedown 后立即对 document 添加捕获阶段的 mouseup 监听（{ capture: true }）
• 同时监听 document 的 mouseleave（配合 e.relatedTarget === null 判定是否出窗）
• 必要时加一个防卡死的兜底：启动 setTimeout，1.5 秒无 mouseup 就强制清除拖拽态

特别注意：iframe 内的内容属于另一个 JS 执行上下文，父页无法直接监听其内部事件，所以只要鼠标进入 iframe，就必须靠 mouseleave + blur 组合来感知离开。

移动端 touchmove 拖拽为什么卡顿、响应延迟？

核心问题是默认行为未禁用：iOS/Android 在 touchmove 时会尝试触发滚动、缩放、高亮等，产生 300ms 延迟和 scroll bounce 干扰。

必须在 touchstart 中调用 e.preventDefault()，且要满足两个条件：

• 监听器需设置 { passive: false }（否则 preventDefault 无效）
• 不能只在 touchmove 里 prevent —— 那太晚了，必须在 touchstart 就声明“我要接管”

示例写法：

target.addEventListener('touchstart', e => {
  e.preventDefault(); // 关键：touchstart 就拦截
  // ...记录触摸点、偏移等
}, { passive: false });
document.addEventListener('touchmove', e => {
e.preventDefault(); // 配合使用，防止滚动
}, { passive: false });

另外，移动端没有 clientX/clientY 的稳定替代，务必用 e.touches[0].clientX，别用 changedTouches（它只含本次变化的点，可能为空）。

拖拽看着简单，真正上线前至少要过这四关：偏移校准、边界适配、跨上下文事件丢失、移动端行为拦截。漏掉任意一个，用户都会在某个设备或操作路径下遇到“拖着拖着就飞了”或者“松手了还在动”的问题。