draggable="true"仅启用原生拖拽样式和事件，不自动改变元素在css grid中的位置；必须手动监听dragstart/dragover/drop事件，通过修改order、grid-area或dom顺序实现网格内重排，移动端需降级为touch事件模拟。
draggable="true" 本身不触发网格内自由拖拽
直接给 div 加 draggable="true" 只能触发浏览器原生拖放（出现半透明 ghost 图像、进入/离开区域触发 dragenter 等），但**不会自动改变 CSS Grid 中的位置**，卡片松手后会回到原位。这不是“自由拖拽”，只是“可拖动的静态元素”。真正实现网格内位置交换或重排，必须手动监听拖放事件并更新 DOM 或 CSS。
用 dragstart + dragover + drop 配合 grid-area 或 order 控制位置
核心思路是：拖拽时记录源卡片索引，释放时计算目标网格单元格坐标，再通过修改 grid-area、order 或 DOM 顺序来重排。推荐用 order —— 它天然适配 display: grid 的流式布局，且无需计算行列名。
- 给每个卡片加唯一
data-index，初始order值与索引一致 - 在
dragstart中保存源卡片的data-index和当前order - 在目标容器（如网格父容器）上监听
dragover并event.preventDefault()（否则drop不触发） -
drop时，获取鼠标位置，用document.elementFromPoint()找到目标卡片（或用closest(".card")），交换两者order值
示例关键逻辑：
card.addEventListener("dragstart", e => {
e.dataTransfer.setData("text/plain", card.dataset.index);
});
gridContainer.addEventListener("drop", e => {
e.preventDefault();
const targetCard = e.target.closest(".card");
if (!targetCard) return;
const fromIndex = e.dataTransfer.getData("text/plain");
const fromCard = document.querySelector(`[data-index="${fromIndex}"]`);
const tempOrder = fromCard.style.order;
fromCard.style.order = targetCard.style.order;
targetCard.style.order = tempOrder;
});
注意 grid-template-areas 与 auto-placement 的兼容性问题
如果网格用了 grid-template-areas（比如定义了 "a b c" "d e f"），那不能靠 order 移动卡片——因为每个区域名是固定的，卡片必须显式指定 grid-area: "a" 才能进对应格子。此时只能动态改 grid-area 值，但需提前规划好所有区域名，并确保目标区域未被占用（否则会重叠）。
- 用
grid-auto-flow: dense可缓解空洞，但无法解决区域名冲突 - 更稳妥的做法是放弃
grid-template-areas，改用grid-template-columns / rows+order，让浏览器自动分配位置 - 若必须用命名区域，建议在
drop前检查目标区域是否已有卡片：document.querySelector('[grid-area="b"]')
移动端 touch 事件无法触发 drag API，必须降级处理
draggable 属性和 dragstart/drop 在 iOS Safari 和部分安卓浏览器中默认禁用或行为异常（尤其微信内置浏览器）。真实项目里不能只依赖原生 drag API。
- 检测
'ontouchstart' in window，是则改用touchstart/touchmove/touchend模拟拖拽 - 用
getBoundingClientRect()计算触摸点相对于网格容器的位置，再映射到最近的卡片 - 避免同时监听
drag和touch事件，防止重复触发；可用if (e.type === 'dragstart' || e.type === 'touchstart')统一分发
这点容易被忽略：开发时在桌面 Chrome 测试完美，上线后用户反馈“手机拖不动”，大概率是没做 touch 降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
