拖拽元素必须设为 absolute 或 fixed，因仅脱离文档流时 left/top 才生效；static 无效，relative 易错位；absolute 需父容器非 static，fixed 适合全局但不随滚动；须带单位（如 'px'），避免用 offsetLeft/offsetTop，禁用默认行为与文本选中，并注意 IE 兼容性及 transform 容器的特殊处理。
拖拽元素为什么必须是 position: absolute 或 position: fixed
因为只有脱离文档流的元素，left 和 top 才会生效；static（默认）或 relative 元素设了 left/top 不会触发位移（relative 虽然能动，但会保留原占位，拖拽时容易遮挡/错位，实际不可靠）。
常见错误现象：left 改了但元素纹丝不动，检查 computed style 会发现 position 是 static；或者用了 relative，拖到一半被其他元素“顶回去”。
-
absolute最常用：父容器需有position: relative或其它非static值，否则按 viewport 定位 -
fixed适合全局拖拽（如模态框、工具栏），但滚动时位置固定，不随页面滚动 - 千万别用
position: sticky—— 它响应滚动，和拖拽逻辑冲突，行为不可控
left/top 动态更新时要注意单位和基准
直接赋值字符串如 element.style.left = '100' 无效，CSS 要求带单位；同时，初始 left 可能是 auto，首次设置前最好显式初始化。
使用场景：鼠标拖拽中实时更新位置，需把 clientX 映射为相对于定位容器的像素值。
立即学习“前端免费学习笔记（深入）”；
- 务必写单位：
element.style.left = x + 'px'，漏掉'px'就是静默失败 - 如果父容器有 padding/border，用
getBoundingClientRect()算偏移比直接减更可靠 - 避免用
offsetLeft/offsetTop读取当前值——它们返回整数且受缩放影响，精度低、不实时
拖拽过程中要禁用默认行为和文本选中
不处理的话，拖拽时可能意外选中文本、触发链接跳转，或在移动端唤起长按菜单，导致拖拽中断。
错误现象：拖两下就卡住，松手后元素跳回原位；或者拖着拖着光标变成文字选择态。
- 在
mousedown或touchstart里加e.preventDefault()（尤其对a、img等可交互元素） - 给拖拽元素设 CSS：
-webkit-user-select: none; user-select: none; - 移动端还要防 touchmove 默认滚动：
touchmove中也调e.preventDefault()，但注意别影响页面正常滚动（建议只在拖拽激活时加监听）
IE/Edge 旧版本里 getComputedStyle 返回的 left 可能是 auto
老浏览器不支持从 getComputedStyle(el).left 读初始值来计算偏移，直接读会得到 'auto'，导致后续计算崩掉。
兼容性影响：IE11、Edge 17 及更早版本都存在这个问题，不是小众场景。
- 不要依赖
getComputedStyle(el).left初始化坐标，改用el.getBoundingClientRect().left - parent.getBoundingClientRect().left - 如果父容器是
fixed，记得用document.documentElement或window.scrollX/Y补偿滚动偏移 - 用
parseFloat()处理字符串值，比parseInt更安全（支持小数像素）
真正麻烦的是嵌套 transform 的容器——此时 getBoundingClientRect 已含 transform 效果，但 left/top 设置又不叠加，这种混合定位得单独做矩阵反推，多数情况绕开更省事。
