仅靠 draggable="true" 无法实现仪表盘自由移动，因其仅触发浏览器默认 ghost 拖拽、无位置控制、不支持 grid 自动让位且跨浏览器行为不一致；需手写 mousedown/mousemove 拖拽逻辑，缓存边界值、绑定 document 级事件、实时校验偏移并配合 grid.insertBefore 实现排序与动画。
为什么不能只靠 draggable="true" 实现仪表盘模块自由移动
加 draggable="true" 只会让浏览器拉出一个半透明 ghost 图像，且仅在鼠标“选中后拖动”时触发，实际点击面板任意空白处根本没反应。更关键的是：松手后元素会跳回原位、无法限制移动范围、不支持 grid 容器内自动让位、Firefox/Safari 对 dragover 行为处理不一致——这些不是 bug，是 drag/drop API 的设计边界。
用 mousedown/mousemove 手写拖拽的核心三件事
真正可控的自由移动，得手动算偏移、绑事件、校边界：
-
mousedown时立刻计算：const offsetX = e.clientX - panel.getBoundingClientRect().left（别用e.offsetX，有 padding 就不准） -
mousemove和mouseup必须绑定到document，不是面板本身——否则鼠标一快移出就断连 -
mouseup后立刻解绑：document.removeEventListener('mousemove', handler)和document.removeEventListener('mouseup', handler) - 限制范围别用
window.innerWidth，缓存document.documentElement.clientWidth和面板初始getBoundingClientRect()，再实时约束left/top值
Grid 布局下拖拽排序要绕开哪些坑
Grid 容器里想让模块拖着拖着其他项自动让位，不能指望 CSS 自动响应 DOM 顺序变化。常见错误是直接改 grid-area 或用 order，结果毫无动画、闪动严重：
- 必须监听
dragover并在回调里调用event.preventDefault()，否则 drop 根本不会触发 - 落点判断别信
event.target，它常是父容器；改用遍历所有.card的getBoundingClientRect()，比对clientX/clientY落在哪一个范围内 - 移动 DOM 节点用
grid.insertBefore(dragged, grid.children[newIndex])，别碰grid-template-areas - 加过渡动画：给卡片设
transition: transform 0.2s ease，移动前先临时设transform: translateX(0)强制重排，再设回none
保存布局顺序必须用 localStorage 还是后端？
本地调试阶段用 localStorage 最快，但要注意两个细节：
- 顺序存的是
data-id字符串数组，不是 DOM 结构——避免下次加载时因 HTML 变动导致 ID 错位 - 初始化渲染时，别按 HTML 顺序挂载卡片，而是按
JSON.parse(localStorage.getItem('dashboardLayout'))的顺序动态插入 - 如果多个设备同步布局，
localStorage会失效；此时必须走后端接口，且需处理并发写入冲突（比如用 ETag 或版本号校验）
最易被忽略的点：拖拽过程中频繁读取 getBoundingClientRect() 或反复调用 document.documentElement.clientWidth 会明显卡顿——这些值必须在 mousedown 或初始化时缓存，而不是塞进 mousemove 回调里实时算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
