拖拽元素必须设为position: absolute或fixed，否则left/top无效；首选absolute但父容器需设relative；用transform代替left/top提升性能；mousedown时用getBoundingClientRect计算偏移；mouseup绑定document并存localStorage；多元素拖拽需动态z-index。
拖拽元素必须设为 position: absolute 或 position: fixed
否则 left/top 无效，元素纹丝不动。原因很简单：只有脱离文档流的元素，left/top 才真正参与定位计算。static（默认）下写 left: 100px 完全被忽略；relative 虽然能动，但保留原始占位，拖拽时易被其他元素“顶回”，视觉错乱。
实操建议：
- 首选
position: absolute，但必须确保其**直接父容器**设置了position: relative（或absolute/fixed），否则它会相对于body定位——而body默认有 margin、滚动条宽度等干扰项，导致一出现就偏移 -
position: fixed适合全局悬浮工具栏类组件，但滚动时位置固定，不随页面动，慎用于内容区内的拖拽窗 - 绝对禁止用
position: sticky，它响应滚动，和拖拽逻辑天然冲突 - 初始
left/top值必须带单位，如el.style.left = '50px'，漏掉'px'就是静默失败
mousedown 时必须用 getBoundingClientRect() 算偏移
直接用 e.clientX - el.offsetLeft 是常见坑：元素若未渲染完成、有缩放、或父容器带 transform，offsetLeft 返回整数且不准；更糟的是，offsetLeft 在 left: auto 时可能返回 0，导致鼠标一按就“啪”地跳到左上角。
安全做法是：mousedown 回调里立刻调用 el.getBoundingClientRect()，再算：
立即学习“前端免费学习笔记（深入）”；
const rect = el.getBoundingClientRect(); const startX = e.clientX - rect.left; const startY = e.clientY - rect.top;
把 startX/startY 存到闭包变量或 el.dataset 里，供后续 mousemove 使用。
拖拽中优先用 transform: translate() 更新位置
直接改 el.style.left/top 触发 layout，频繁更新卡顿明显；transform 只触发合成，性能好，还绕过单位、初始值、定位上下文等一堆坑。
实操要点：
- 拖拽开始后，立即切换为
transform控制，不再碰left/top -
mousemove中计算：el.style.transform = `translate(${e.clientX - startX}px, ${e.clientY - startY}px)` - 加
will-change: transform或backface-visibility: hidden触发 GPU 加速 - 边界限制要基于
el.getBoundingClientRect()和父容器尺寸做，因为transform不影响布局，offsetWidth无法反映缩放后的真实宽高
mouseup 必须绑定在 document 上，且要持久化坐标
只在拖拽元素上监听 mouseup，鼠标一滑出就收不到事件，拖拽“粘住”；刷新后位置归零，是因为坐标只存在内联样式里，没存下来。
关键动作：
- 在
mousedown时，给document绑mouseup和mouseleave（兜底），并在处理函数里清除监听 - 拖拽结束时，把最终
x/y存进localStorage，键名带前缀防冲突，如localStorage.setItem('draggable-' + el.id, JSON.stringify({x, y})) - 页面加载时，先读
localStorage，检查是否为有效数字，再赋值给el.style.left/top（注意：如果全程用transform，这里可选是否固化回left/top） - 多个拖拽元素共存时，
z-index必须动态递增分配，不能写死；移动端用classList.add('is-dragging')+ CSS!important更稳
最易被忽略的是：拖拽容器自身若有 border、padding 或 transform: scale()，所有基于 clientX 的坐标计算都会偏差，得在 getBoundingClientRect() 结果上手动修正。
