直接修改 grid-area 或 order 无动画效果，因浏览器不支持其插值过渡，仅触发跳变式重排；真正可动画的方案是保持 Grid 结构不变，通过 DOM 顺序调整 + transform 实现 FLIP 动画。
为什么直接改 grid-area 或 order 没动画
因为浏览器不会对 grid-area 的变更做插值过渡，order 在 Grid 容器中仅影响命名区域的放置逻辑，且不触发重排动画。CSS 动画只响应可插值属性（如 transform、opacity），而布局属性（grid-column、grid-row、order）修改后是“跳变”的——DOM 一更新，位置就瞬间切换，没有中间帧。
常见错误是给所有网格项加 transition: all .3s，结果排序时元素闪一下或卡顿，本质是浏览器在重排（reflow）而非重绘（repaint），性能差还无效果。
- 别用
grid-template-areas控制动态顺序——它只能静态声明，没法 JS 实时更新 -
order在 Flex 容器里能用，但在 Grid 中几乎无效（除非配合grid-auto-flow: dense和命名区域，但不可控） - 真正可动画的路径只有一条：保持 Grid 结构不变，只动 DOM 顺序 +
transform
用 DOM 顺序 + transform 实现平滑重排
核心思路是：先让所有子项“看起来没动”，再靠 JS 移动它们在 DOM 中的实际位置，同时用 transform 补上视觉位移差，最后清除 transform 触发 CSS 过渡。
这本质上是 FLIP 动画的简化版：First（原位置）→ Last（新位置）→ Invert（反向位移）→ Play（还原并播放过渡）。
- 每次重排前，用
Array.from(grid.children)获取当前顺序，算出目标索引 - 调用
grid.insertBefore(dragged, grid.children[newIndex])更新 DOM 顺序 - 移动前，对所有子项执行
el.style.transform = 'translateX(0)'强制触发重排，避免后续动画跳变 - 紧接着设
el.style.transform = ''，让 transition 生效 - CSS 必须写死：
.grid-item { transition: transform 0.25s ease; }，不能用all
dragover 中怎么算“插到第几个格子之间”
Grid 容器本身没有“间隙元素”，所谓“插在 A 和 B 之间”只是视觉判断。不能信 event.target——拖拽中它大概率是父容器；也不能只靠 elementFromPoint()，因为子项可能有 pointer-events: none 或遮挡。
稳妥做法是：在 dragover 里遍历所有 .grid-item，用 getBoundingClientRect() 拿每个的边界，再根据鼠标 clientX/clientY 算距离，取最近的一个，并按水平/垂直方向决定插入偏移量。
- 横向网格：比较
clientX与每个 item 的left + width / 2，找出最接近的分割点 - 纵向网格：用
clientY对比top + height / 2 - 加
requestAnimationFrame节流，避免每帧都计算矩形框导致卡顿 - 防抖不是可选——没它，快速拖过多个格子时会频繁触发重算，UI 直接卡住
移动端和可访问性容易被忽略的点
原生 drag API 在 iOS 和 Android 上基本不可用，Chrome for Android 也已弃用。这不是 bug，是规范层面的限制：触摸事件模型和拖放语义不兼容。
另外，用 DOM 顺序重排虽视觉流畅，但焦点顺序（Tab 键）、屏幕阅读器读取顺序仍按原始 HTML 流，如果排序逻辑改变了信息重要性，就会造成可访问性断裂。
- 必须为移动端降级：监听
touchstart/touchmove/touchend模拟拖拽，或直接禁用拖拽转为“点击编辑排序”模式 - 若依赖视觉排序传达优先级，需同步更新
aria-sort或用tabindex手动调整焦点流 - 不要把排序状态只存在 DOM 里——维护一份独立的数组描述顺序，DOM 只是视图层，否则刷新就丢状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
