磁吸感需用 transform + transition 实现动态吸附：拖拽中实时计算距锚点距离，≤24px时按比例缩放偏移量，配合 cubic-bezier(0.25,0.46,0.45,0.94) 缓动过渡，全程仅对 translate 过渡、加 will-change 提升图层，并手动监听 pointer 事件而非原生 drag。
怎么用 transform + transition 模拟磁吸感
纯 CSS 实现“磁性吸附”本质是让元素在靠近目标区域时减速、微调位置，而不是硬切。关键不是加动画，而是控制动画的缓动曲线和触发时机。
常见错误是直接给 dragend 绑定 transform 硬跳，结果毫无吸附感，反而像被弹开。真正有效的做法是：拖拽中持续监听位置，快到吸附区时，用 transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似慢入慢出）过渡到吸附点。
- 吸附距离建议设为
24px以内，太大人眼会察觉“追着跑” - 只对
transform: translate()做过渡，别碰left/top—— 否则触发重排，卡顿明显 - 必须加
will-change: transform提前升层，否则快速拖拽时吸附动画掉帧
pointermove 里实时计算吸附偏移量
浏览器原生拖拽（dragstart/dragover）不暴露鼠标坐标细节，也没法中途干预位移。所以得放弃 draggable="true"，改用手动监听 pointerdown → pointermove → pointerup 流程。
核心逻辑：每次 pointermove 触发时，算出当前元素中心点到所有吸附锚点的距离，取最近的一个；如果距离 <= 24，就按比例缩放偏移量（比如距离 12px 时，只补一半位移），再用 requestAnimationFrame 更新 transform。
立即学习“前端免费学习笔记（深入）”；
- 别用
Math.sqrt()算欧氏距离——直接比(dx * dx + dy * dy)更快，省开方 - 吸附锚点坐标建议缓存成
getBoundingClientRect()结果，避免每次重排读取 - 移动端要同时监听
touchmove，且记得event.preventDefault()阻止滚动穿透
为什么不能只靠 @keyframes + animation
@keyframes 是预设路径，无法响应实时鼠标位置。你没法写一个动画，让它“看到鼠标快过来了就提前弯个弧线”。所有基于 animation 的“磁吸”方案，实际都是固定几个终点做切换，属于伪吸附。
典型翻车场景：用户拖着元素斜向靠近角落，预设动画只会直着过去或突兀拐弯，完全违背物理直觉。真磁吸必须每帧重算目标位置。
-
animation一旦开始就不可中断，而吸附需要在pointerup瞬间立刻停止并微调落点 - 多个吸附点共存时，
animation无法动态选目标；CSS 不支持运行时条件判断 - 加上
animation-fill-mode: forwards后，DOM 的getComputedStyle返回的仍是初始值，后续 JS 控制容易错乱
兼容性与性能关键点
这个效果在 Safari 上最容易出问题：它对 transform 的合成层处理更保守，will-change 不生效时，pointermove 频率一高就会掉帧。Chrome 和 Firefox 相对稳定。
- 务必限制
pointermove触发频率，用throttle控到 ≤ 60fps（即 ≥ 16ms 间隔） - 吸附逻辑里避免访问
offsetLeft、clientWidth这类触发布局的属性 - 如果页面有大量同类型可拖拽元素，用
CSS.contain: layout paint隔离渲染影响范围 - 不要在吸附过程中修改
z-index或显隐状态——这会强制重绘整块区域
磁吸不是加个贝塞尔曲线就完事，它依赖位置反馈闭环。漏掉实时计算、硬套动画、忽略合成层，三个里占一个，效果就变成“抽搐式归位”。
