这个效果是怎么做出来的
吸附的核心只有一句话：松手时把落点目标从「手指位置」改成「最近的网格交点」。拖拽阶段 pointermove 让卡片完全跟手；pointerup 时把卡片中心坐标除以格距、四舍五入，得到最近交点，再让 transform 从当前位置动画过去——缓动用带过冲的弹簧曲线 cubic-bezier(0.34, 1.56, 0.64, 1)，落位那一下有「啪嗒吸住」的手感，这就是磁吸感的全部来源。两个增强让它更像产品：一是预提示，拖拽中实时算最近交点，距离小于半格时点亮那格虚线框，用户没松手就知道会吸到哪；二是活物感，按水平速度给卡片一点小角度倾斜，移动时微微侧身。
怎么用这条提示词
适合桌面图标整理、看板卡片归位、表单设计器里摆控件、相册九宫格排序——一切「自由摆放但秩序收尾」的场景。发给 AI 时说明格子尺寸和吸附范围（半格以内最自然），再补一句触屏要 touch-action: none，否则拖两下就被页面滚动手势抢走了。
想效果更好？试试这些
弹簧过冲别再调大，1.56 已经很弹，翻倍会来回弹两下像 bug。倾斜角度控制在 3 度以内，超了像失控而不是灵动。磁吸高亮框要对齐卡片中心而不是左上角，不然提示位置和实际落位对不上。还有个隐蔽坑：拖拽全程只用 transform 写位移，别再动 left 或 top，两套定位混用会让吸附动画的起点算错，卡片看起来像原地瞬移。