absolute元素必须嵌套在position: relative父容器中才能相对于面板自身定位，否则会脱离上下文；拖拽时应通过鼠标位移差值累加计算left/top，注意单位px和整数取值，并结合wrapper与panel的offset尺寸限制边界。
relative 容器是 absolute 定位的锚点，不是可选而是必须
想让 absolute 元素相对于面板自身位置移动（比如拖拽时实时更新 top/left），它的父容器必须设为 position: relative。否则 absolute 会逐层向上找最近的定位祖先，最终可能脱出面板边界，甚至相对于 body 偏移——拖拽就完全失控了。
常见错误是只给面板加 absolute 或 fixed，却忘了套一层 relative 父容器。正确结构应类似：
拖我内容
-
.panel-wrapper设position: relative，不设宽高也行，它只是提供定位上下文 -
.panel用position: absolute，初始top/left可设为20px这类值，后续由 JS 动态更新 - 避免给
.panel-wrapper加overflow: hidden，否则拖到边缘会被裁切
拖拽中直接改 style.left/style.top 效率高但要注意单位
在 mousemove 事件里直接操作 element.style.left 和 element.style.top 是最轻量的方式，比反复修改 transform 或重排 class 更快。但必须带单位（通常是 px），否则无效。
- 漏写单位会导致样式被忽略，面板卡在原地不动——这是最常踩的坑
- 数值建议用整数，避免小数像素引发 subpixel 渲染模糊（尤其在 Safari 上）
- 不要用
getBoundingClientRect()的结果直接赋值给style.left，它返回的是相对于视口的坐标，而absolute需要的是相对于父容器的偏移量 - 推荐用“鼠标位移差值”累加：记录
mousedown时的初始偏移和鼠标位置，之后每次用currentX - startX + initLeft计算新 left 值
拖拽边界限制得靠父容器尺寸 + offsetTop/offsetLeft 计算
限制面板不拖出可视区域，不能只看 window.innerWidth，因为 absolute 是相对 .panel-wrapper 定位的，而 wrapper 自身可能有 margin、滚动位置或非全屏布局。真正该用的是 wrapper 的 offsetWidth/offsetHeight，再结合 panel 自身 offsetWidth/offsetHeight。
立即学习“前端免费学习笔记（深入）”；
- 左边界：最大允许
left = 0，最小允许left = wrapper.offsetWidth - panel.offsetWidth - 上边界：同理，
top范围是0到wrapper.offsetHeight - panel.offsetHeight - 如果 wrapper 不是 body，且页面有滚动，需额外减去
wrapper.getBoundingClientRect().top或监听scroll更新基准 - 别用
Math.min/Math.max简单截断——要先算出理论值，再 clamp 到合法区间
移动端 touchmove 需额外处理，preventDefault 很关键
在 iOS 和部分安卓浏览器上，不阻止 touchmove 默认行为，会导致页面跟着拖拽一起滚动，面板瞬间失联。这不是 bug，是浏览器对 touch 事件的默认响应策略。
- 必须在
touchstart中调用event.preventDefault()，且不能只在touchmove里加 - 注意：加了
preventDefault后，该元素上的 click 事件会失效，需手动触发或改用pointerdown事件替代 - 更稳妥的做法是用
pointerdown/pointermove，它天然兼容 mouse/touch，且无需额外preventDefault（除非需要禁用缩放） - 移动端还要考虑
touch-action: none样式，防止系统手势（如双指缩放）干扰拖拽
拖拽逻辑本身不复杂，难的是各种边界条件：滚动容器里的定位基准、移动端的手势冲突、小数像素渲染、父容器的 box-sizing 差异……这些地方一不留神，面板就飞走或者卡死。
