CSS Grid 本身不支持拖拽，排序依赖 DOM 顺序或 order/grid-row-column 动态调整；order 适合简单线性排序，grid-row/column 适合精准行列定位；需注意 placeholder、兼容性及 dragend 清理 transform。
grid布局中拖拽排序的底层限制
原生 CSS Grid 本身不提供拖拽能力，grid-template-areas 和 grid-area 是静态声明式布局，无法响应拖拽时的实时位置变化。真正起作用的是 DOM 元素顺序 + grid-auto-flow + order 属性或显式 grid-row/grid-column 定位。拖拽排序的本质是动态调整元素在 DOM 中的顺序或其 CSS 排序权重，而非“移动 grid 单元格”。
用 order 实现轻量级拖拽排序
适用于项目数量不多、不需要跨行/列复杂定位的场景。关键点在于：所有网格项需设置 display: grid 的父容器启用 grid-auto-flow: row（或 column），并统一设置 order 值，再通过 JS 动态交换 order 值触发重排。
- 必须给每个子项设置初始
order（如按 DOM 顺序设为 0, 1, 2…），否则默认值都是 0，交换无效 - 拖拽过程中建议临时添加
pointer-events: none到被拖元素，避免干扰dragover事件 - 不要依赖
grid-row/grid-column配合order—— 二者冲突时后者可能被忽略
const items = document.querySelectorAll('.grid-item');
items.forEach((item, i) => item.style.order = i);
// 拖拽结束时，根据目标索引更新所有 order
function updateOrder(newIndex) {
const orders = Array.from(items).map((_, i) => i);
// 简单示例：把 draggedItem 插入 newIndex 位置
const draggedIndex = Array.from(items).indexOf(draggedItem);
orders.splice(draggedIndex, 1);
orders.splice(newIndex, 0, draggedIndex);
items.forEach((item, i) => item.style.order = orders[i]);
}
用 grid-row/grid-column 实现精准定位拖拽
适合需要固定行列位置、支持跨区域（grid-column: span 2）或与 grid-template-areas 配合的场景。此时不能依赖 order，而是直接读写 grid-row-start 和 grid-column-start 的内联样式。
- 必须使用
grid-row: auto / auto或grid-row: 1 / -1等显式值，避免grid-row: span 1导致计算混乱 - 拖拽目标位置需转换为行列坐标（例如监听
dragover元素的getBoundingClientRect()+ 网格单元尺寸反推） - 注意：Firefox 对内联
grid-row的解析比 Chrome 更严格，推荐统一用grid-row-start+grid-row-end
// 假设已知目标单元格行列为 (row, col)
draggedItem.style.gridColumnStart = col;
draggedItem.style.gridRowStart = row;
// 若需跨格，再设 end 值
if (spanCol > 1) draggedItem.style.gridColumnEnd = `span ${spanCol}`;
if (spanRow > 1) draggedItem.style.gridRowEnd = `span ${spanRow}`;
拖拽过程中的视觉反馈与兼容性陷阱
用户拖动时若无视觉提示，会误以为操作失败。但 CSS Grid 本身不支持 “占位符” 元素（placeholder），必须手动插入一个空 <div class="placeholder"></div> 并设置 visibility: hidden 或 opacity: 0，同时用 grid-row/grid-column 占据目标位置。
立即学习“前端免费学习笔记（深入）”；
- 禁止对 placeholder 使用
display: none—— 这会让 Grid 认为它不存在，布局塌陷 - 移动端 Safari 对
dragstart的setData支持有限，建议降级为touchstart+ 手动模拟 - IE11 完全不支持
grid，且drag事件行为异常，必须检测CSS.supports('display', 'grid')并提供 fallback
最易被忽略的是：拖拽结束后未重置 transform: translate，导致后续点击事件偏移 —— 务必在 dragend 中清除所有临时 transform 样式。
