必须给拖拽元素的直接父容器设 position: relative，否则 left/top 会相对于 body 或 html 计算，受其默认 margin 或滚动影响而偏移。
拖拽元素用 left 和 top 定位，为什么一拖就偏移？
因为 left/top 是相对于最近的「定位上下文」（即 position 为 relative、absolute 或 fixed 的祖先）计算的，不是页面左上角。如果父容器没设 position: relative，浏览器会一路往上找，最终可能落到 或 上——而它们通常有默认 margin 或滚动偏移，导致初始位置和预期不符。
- 必须给拖拽元素的**直接父容器**加
position: relative（或其它非static值），才能让left/top真正以它为基准 - 避免给
或设margin/padding，否则即使父容器有relative，滚动后top: 0也可能不贴顶 - 初始
left/top建议用px或rem，别用%——百分比会随父容器尺寸变化，拖拽中更新坐标时容易失准
position: absolute 元素拖拽时，如何防止脱离视口？
纯靠 left/top 更新坐标，很容易把元素拖到屏幕外，尤其在小屏或缩放后。关键不是限制拖拽范围本身，而是要在每次移动前做边界校验。
- 读取父容器（即
position: relative那个）的getBoundingClientRect()，拿到它的width和height - 拖拽中计算新
left值时，用Math.max(0, Math.min(newX, parentWidth - elementWidth))；top同理 - 注意：元素自身宽高要用
getBoundingClientRect()而非offsetWidth，前者含 transform 缩放，后者不含
为什么拖拽后 left/top 值越来越不准？
常见于鼠标事件坐标没减去元素自身偏移量。比如监听 mousemove，直接把 event.clientX 当作新 left，却忘了元素左上角并不一定对齐鼠标指针中心。
- 首次
mousedown时，立刻记录偏移：const offsetX = event.clientX - parseInt(getComputedStyle(dragEl).left) || 0 - 后续
mousemove中，新left应为event.clientX - offsetX，而不是直接赋clientX - 更稳妥的做法是用
getBoundingClientRect()动态算当前左上角，再结合鼠标相对位置修正，避免 CSStransform干扰
现代方案要不要放弃 left/top 改用 transform？
要。直接改 left/top 触发 layout，频繁更新性能差；transform: translate(x, y) 只触发合成，更顺滑，且不受定位上下文影响——它永远相对于自身原始位置。
立即学习“前端免费学习笔记（深入）”；
- 初始定位仍可用
left/top（为了方便 CSS 控制起始点），但拖拽开始后立即切换成transform - 拖拽中只更新
transform，不再碰left/top；结束时可选是否把最终位置“固化”回left/top（一般没必要） - 注意：用
transform后，上面提到的边界校验逻辑不变，只是把left/top换成translateX/translateY的数值
拖拽的底层其实就三件事：定参考系、控坐标源、限活动域。最容易被忽略的是参考系那层——很多人调了半小时 left 值，最后发现只是父容器少了一行 position: relative。
