按钮拖拽位置突变的根本原因是未设置position: absolute或fixed导致元素未脱离文档流，浏览器忽略static元素的left/top；应使用transform替代left/top，配合requestanimationframe节流及localstorage持久化坐标，并处理移动端键盘干扰与屏幕适配。
拖拽时按钮位置突变，是因为没设position: absolute或fixed
直接监听 mousedown 就改 left/top，第一次拖动常“跳一下”，根本原因是元素没脱离文档流。浏览器对 static 元素的 left/top 会忽略或重算布局。
- 必须提前给按钮加
position: absolute（相对父容器）或position: fixed（相对视口） - 若用
absolute，确保其父容器有position: relative，否则它会上溯到定位 - 别依赖
getBoundingClientRect()算偏移再写回left/top——两次布局计算易引发抖动
mousemove中更新坐标，优先用transform而非left/top
left/top 每次赋值都触发重排，性能差，且和 CSS transition、will-change 冲突；transform: translate(x, y) 是合成层操作，不重排，更稳。
- 推荐写法：
el.style.transform = `translate(${x}px, ${y}px)` - 若必须用
left/top（比如要配合transition动画），先确认getComputedStyle(el).position === 'absolute'或'fixed' - 所有坐标更新必须节流，用
requestAnimationFrame替代原生mousemove频繁触发 - 边界限制逻辑写在
requestAnimationFrame回调内，例如：const x = Math.max(0, Math.min(e.clientX - offsetX, window.innerWidth - el.offsetWidth))
拖完刷新就回原位？得把坐标存到localStorage
内联样式 style.left 和 style.top 或 style.transform 在页面卸载后就没了，JS 变量也清空。不持久化，等于白拖。
- 在
mouseup后立刻存：localStorage.setItem('fabPos', JSON.stringify({ x, y })) - 页面加载时读取并应用：
const pos = JSON.parse(localStorage.getItem('fabPos') || '{}'); if (pos.x != null) el.style.transform = `translate(${pos.x}px, ${pos.y}px)` - 注意：
transform值是相对自身原点的偏移，存的是像素值，不是百分比或 rem - 若按钮初始有
top/left，读取 localStorage 前先清空内联top/left，避免和transform冲突
移动端拖拽失效或卡顿，往往卡在安全区和键盘干扰上
iOS Safari 和部分安卓 WebView 对 fixed + 拖拽组合支持脆弱，尤其键盘弹出、地址栏收起时视口高度突变，会导致坐标错乱甚至 touch 事件丢失。
- 别用
bottom/right配合transform做定位起点——iOS 渲染不稳定 - 检测键盘弹出：监听
window.visualViewport?.height变化，下降 >15% 就暂停拖拽或切回absolute定位到滚动容器底部 - 触摸设备必须设
touch-action: none在按钮上，否则系统默认手势（如滚动）会拦截touchmove - 点击热区至少
48px × 48px，哪怕图标小，也要靠padding扩展可触区域
实际项目里最常被忽略的，是拖拽结束后的坐标还原逻辑——很多人只存了位置，却没处理按钮在不同屏幕尺寸下的锚点适配（比如从 iPad 拖到手机，绝对像素值可能越界），这时需要结合 window.innerWidth 和 el.offsetWidth 做一次边界 clamp，而不是无脑还原。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
