css grid 本身不支持拖拽重排动效，需用 js 控制 order 或 grid-row/grid-column 并配合 transform + transition 模拟动画；grid-column 等属性无法 transition 是因轨道索引离散不可插值且触发重排。
直接说结论：CSS Grid 本身不支持拖拽重排的动效反馈，必须靠 JS 控制 order 或 grid-row/grid-column，再配合 transform + transition 模拟位移动画；用 grid-column 等属性做 transition 会卡顿且无效。
为什么不能给 grid-column / grid-row 加 transition
浏览器无法对离散的轨道索引（如 grid-column: 2 / 4 → grid-column: 3 / 5）做插值计算，所以 transition: grid-column 0.3s 完全不生效。更严重的是，每次修改都会触发整行/列的重排（reflow），导致掉帧甚至卡死。
- 错误写法：
.item { transition: grid-column 0.3s; }—— 不过渡、只突变、性能差 - 正确替代：保持
grid-column静态，用transform: translateX()模拟滑动 - 若需“视觉上移到第3列”，先算出该列左边界（比如
getBoundingClientRect().left），再用transform移动到对应位置
用 order + transform 实现可动画的拖拽反馈
order 本身支持 transition: order 0.2s，但它只改变层序，不产生位移感；要让元素“滑过去”，得叠加 transform 做视觉补偿。
- 拖拽开始时，给被拖项加
pointer-events: none，避免干扰dragover - 在
dragover阶段，根据目标位置计算其应处的order值，并同步设置transform把它“滑”到目标格子中心 - 拖拽结束（
dragend）后，清除transform，仅保留最终order值，让 Grid 自动重排 - 注意：所有参与排序的项必须有初始
order（不能全为默认 0），否则交换无效
placeholder 占位与视觉对齐的关键细节
拖拽时用户需要看到“松手后会插在哪”，这靠插入一个透明占位符（placeholder）实现，但它必须和真实网格项共享同一套 grid-row/grid-column 计算逻辑，否则错位。
- placeholder 必须是真实 DOM 元素，插入到目标索引位置（不是 append 到末尾）
- 它需设
visibility: hidden+pointer-events: none，但不能用display: none（会退出 Grid 布局流） - 如果父容器用了
grid-auto-flow: row dense，placeholder 可能被自动填进空隙，导致位置错乱——应改用row或column - 拖拽结束前，记得调用
placeholder.remove()，否则残留 DOM 会影响后续排序逻辑
容易被忽略的可访问性陷阱
order 改变的不只是视觉顺序，还会改变 tab 键焦点顺序和屏幕阅读器朗读流。如果你在后台把第 5 个卡片 order 设为 -1，它会第一个获得焦点，哪怕它在 HTML 里排最后。
- 测试方式：关掉鼠标，纯键盘 Tab 导航，看焦点是否跳到意料之外的位置
- 若业务要求“视觉重排但焦点保持源顺序”，就不能用
order，得改用grid-row/grid-column显式定位 +transform动画 - Chrome DevTools 的 “Accessibility” 面板能直接显示当前可访问性顺序，比肉眼判断可靠得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
