正确做法是在touchmove中用event.touches[0].clientx/y获取实时坐标，结合元素尺寸校准后通过transform: translate()更新位置，禁用passive并preventdefault，避免getboundingclientrect()。
touchmove 里用 getBoundingClientRect() 拿不到实时位置
手指滑动时想让某个元素跟着指头走，直接在 touchmove 里调 getBoundingClientRect() 是错的——它返回的是元素相对于视口的静态快照，不随 touchmove 的频繁触发自动更新，而且滚动页面后数值就偏了。
正确做法是用 event.touches[0] 的坐标，再结合元素自身尺寸做偏移校准：
-
event.touches[0].clientX和clientY是最可靠的实时坐标源 - 如果元素需要“指头中心对齐”，得减去元素宽高的一半：
left = touchX - width / 2 - 记得给目标元素设
position: fixed或position: absolute，否则top/left不生效 - 别在
touchmove里直接改style.left，要节流或用requestAnimationFrame，否则卡顿明显
CSS transform 移动比 top/left 更顺滑
用 top 和 left 改位置会触发 layout + paint，移动端掉帧严重；transform: translate(x, y) 只走合成层，GPU 加速，手感接近原生。
实操要点：
- 把元素加上
will-change: transform（仅需一次，别放动画里反复设） - 计算完坐标后，统一用
element.style.transform = `translate(${x}px, ${y}px)` - 避免混用
top/left和transform，浏览器可能降级回 layout - 注意：
transform的坐标系原点默认是元素左上角，若需锚点居中，加transform-origin: center
iOS Safari 的 touchmove 默认行为会干扰定位
在 iOS 上，没阻止默认行为的 touchmove 会导致页面滚动、缩放甚至光标跳动，元素瞬间“脱手”。
必须显式处理：
- 监听
touchmove时加{ passive: false }，否则preventDefault()无效 - 在事件回调开头立刻写
event.preventDefault()，且不能放在异步回调里 - 只对目标元素或其容器绑定，别直接绑在
document上，否则影响全局手势 - 如果同时要支持点击，得在
touchend后再判断是否为点击，避免误吞 tap
手指抬起后要不要“吸附”或“回弹”？
纯跟随容易让用户觉得“粘不住”，加一点物理反馈能提升体验，但别自己手写弹簧算法。
推荐方案：
- 用
CSS transition做缓动回弹：比如松手后设transform: translate(0, 0)，配合transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) - 吸附逻辑放在
touchend里算，别在touchmove中预测 - 如果目标区域有多个吸附点，提前存好坐标数组，用
Math.min(...distances)找最近的 - 注意：过渡动画期间用户再次触摸，得清掉正在运行的
transition，否则状态错乱
真实场景里最常被忽略的是 passive: false 和 transform 锚点偏移——一个导致 iOS 完全不响应，一个让元素飘在指头外面两厘米。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
