拖拽占位必须用 grid-row-start/End 和 grid-column-start/End 显式设置行列，禁用 order 和 grid-auto-flow: dense；Firefox 需拆分书写避免解析异常，JS 需精确计算目标坐标并同步更新所有项定位。
拖拽时用 grid-row / grid-column 显式占位，别依赖 order
拖拽排序过程中需要“占位”（即目标位置出现虚线框、其他项自动让出空间），order 完全无法实现。它只在布局计算初期起作用，拖拽中动态改 style.order 不会触发重排占位，浏览器仍按原始轨道分配空间。必须切换到显式定位模式：用 grid-row-start 和 grid-column-start 直接控制每个项落点。
占位逻辑靠 JS 计算行列坐标 + 内联样式写入
监听 dragover 事件时，不能只靠元素 DOM 位置判断目标格子；需结合容器网格单元尺寸反推坐标：
- 用
container.getBoundingClientRect()获取容器视口位置 - 用
getComputedStyle(container).gridTemplateColumns解析列宽（注意fr需配合容器宽度换算） - 根据
event.clientX/Y减去容器左上角，除以平均单元宽/高，向下取整得目标行列索引（如colIndex = Math.floor((x - left) / cellWidth)） - 将被拖项的
style.gridRowStart和style.gridColumnStart设为该行列值（例如"3"），其他项保持原定位或按新顺序重新分配
Firefox 下必须用 grid-row-start + grid-row-end 拆开写
Firefox 对 grid-row: 3 / 4 这类缩写解析不稳定，尤其在拖拽高频更新时易丢弃样式。实测可靠写法是分开设置：
draggedItem.style.gridRowStart = "3"; draggedItem.style.gridRowEnd = "4"; draggedItem.style.gridColumnStart = "2"; draggedItem.style.gridColumnEnd = "3";
这样能确保所有浏览器都识别为显式轨道占位，避免因解析差异导致“跳格”或回退到 auto-placement。
立即学习“前端免费学习笔记（深入）”；
避免 grid-auto-flow: dense 干扰占位视觉
启用 dense 会让浏览器主动填空，导致你刚设好的占位被其他未拖动项“挤进来”，视觉错乱。拖拽排序场景下必须禁用：
- 父容器设
grid-auto-flow: row（默认值即可，不用显式写） - 绝对不要加
dense—— 即使 CSS 里写了也要 JS 覆盖：container.style.gridAutoFlow = "row" - 如果已有
grid-template-areas，它本身就会禁用dense，但要注意区域模板会完全屏蔽order，所以占位只能靠grid-row/column
真正难的不是算坐标，而是每次拖拽都要同步更新所有项的行列值并保证不冲突——漏掉一个 grid-row-end，或者某项没清空旧的 grid-column，占位就立刻失效。
