直接用left/top实时更新会频繁触发重排，而CSS变量配合transform可避免此问题；核心是将鼠标坐标存入--x/--y变量，并用transform:translate(var(--x),var(--y))消费，需全程带单位、确保定位上下文正确。
为什么不能直接用 left 和 top 做实时更新
因为每次 JS 改 style.left 都会触发重排（layout），尤其在 mousemove 高频调用时，性能断崖式下降。浏览器要反复计算位置、重绘、合成，卡顿明显。而 CSS 变量本身不触发重排，配合 transform 才是真正轻量的方案。
如何用 --x 和 --y 驱动拖拽位移
核心是把鼠标坐标存进变量，再让元素用 transform: translate(var(--x), var(--y)) 消费它——但必须注意单位一致性：
-
document.documentElement.style.setProperty('--x', e.clientX + 'px')—— 必须带px，不能只写数字 - 元素样式里写
transform: translate(var(--x), var(--y))，不是calc()混合单位（var(--x) - 50%是非法的） - 如果要居中对齐光标（比如一个 40×40px 的圆点），就写
transform: translate(calc(var(--x) - 20px), calc(var(--y) - 20px)) - 移动端必须监听
touchmove并取e.touches[0].clientX，不能只靠mousemove
拖拽过程中怎么避免“跳变”和初始错位
跳变通常发生在拖拽启动瞬间，根源是初始 left/top 被清空或 fallback 到 auto。解决方式不是靠 JS 算偏移，而是用变量兜住起点：
- 在 :root 或父容器上定义
--init-left: 240px、--init-top: 180px，且必须带单位 - 元素内联样式显式写
style="left: var(--init-left); top: var(--init-top)"，否则首帧渲染 fallback 为auto - JS 初始化时读变量：用
getComputedStyle(document.documentElement).getPropertyValue('--init-left').trim()，再赋给el.style.left - 确保父容器有
position: relative（或fixed），否则absolute元素的定位上下文错乱
移动端 Safari 的两个隐藏坑
iOS Safari 对 mousemove 在非触摸区域响应极弱，且部分版本对 setProperty() 更新变量有延迟。这不是 bug，是浏览器策略：
立即学习“前端免费学习笔记（深入）”；
- 必须同时监听
touchstart/touchmove，并用e.touches[0]取坐标 - 不要在事件里做 DOM 查询或
getBoundingClientRect()，纯设变量才能保持 60fps - 如果父容器用了
transform: scale(0.9)，那--init-left的值也要按比例缩放，否则初始位置偏移
拖拽逻辑本身不难，难的是首帧渲染准确、跨设备行为一致、以及变量值从定义到消费全程带单位且无空格——漏掉任意一环，都会在某个机型或某个时间点突然“闪一下”或“飘走”。
