纯HTML无法实现仪表盘拖拽排序，必须由JavaScript配合DOM操作与存储机制完成；原生drag API易失效因dragover默认被拦截、Grid下event.target常为父容器、浏览器兼容性差；推荐用SortableJS实现，它自动处理跨容器拖拽、插入点计算与移动端兼容，并通过onEnd回调同步顺序至localStorage。
纯 HTML 无法实现仪表盘拖拽排序——它不处理交互逻辑，只提供结构。真正能拖、能排、能记住顺序的，是 JavaScript 配合 DOM 操作 + 存储机制完成的。
为什么原生 drag API 在仪表盘里容易失效
浏览器对 dragover 事件默认拦截，不显式调用 event.preventDefault()，整个拖拽链就断在第二步；Grid 布局下，event.target 经常是父容器而非具体卡片，靠它判断插入位置会错位；Firefox 和 Safari 对嵌套 grid 容器的 drop 事件触发时机不一致，导致移动端或跨列拖拽时目标索引丢失。
-
draggable="true"必须加在每个卡片元素上，仅设 CSScursor: grab不起作用 - 所有可接受拖入的容器（比如
.dashboard）都要监听dragover并立刻preventDefault() - 不要依赖
event.dataTransfer.getData()传 ID —— 它在跨域 iframe 或某些移动端 WebView 中被禁用 - 视觉反馈不能只靠 class 切换，得配合
transform: scale(0.98)+transition避免卡顿
用 SortableJS 实现 grid 仪表盘拖拽（推荐方案）
比手写原生逻辑快、稳、少坑，尤其适合多列 grid 布局。它自动处理 dragover 节流、插入点计算、动画过渡和移动端 touch 兼容。
- 引入脚本：
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> - 容器加
id="dashboard"，每张卡片加class="card"和唯一data-id - 初始化时指定
group: { name: 'dashboard', pull: true, put: true }，支持跨容器拖拽 - 用
onEnd回调获取新顺序：Array.from(el.children).map(c => c.dataset.id)，存进localStorage.setItem('dashboardLayout', ...)
拖拽后如何让每张卡片加载对应数据并支持配置弹窗
拖拽只管「位置」，不管「内容」。卡片必须自己按 data-id 主动拉取配置，而不是在拖拽逻辑里硬编码图表类型或接口地址。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 卡片挂载时读取
dataset.id，再从预置配置对象（如cardConfigs）中查出apiUrl、chartType、title - 配置弹窗用
data-id作为 key 加载对应 schema，提交后触发localStorage更新并重绘该卡片 - 销毁卡片前必须手动移除其内部图表实例（如 ECharts 的
dispose()），否则内存泄漏 - 避免在
onEnd里直接请求接口更新后端——先存本地，等用户点击「保存布局」再批量提交
Grid 布局下拖拽排序的视觉平滑关键点
CSS Grid 本身不响应 DOM 顺序变化做过渡动画，所谓“滑动效果”全是 JS + transform 模拟出来的。
- 给卡片加
transition: transform 0.2s ease，但初始状态要设transform: none - 每次
drop后，先遍历所有子项，用getBoundingClientRect()记录旧位置，再用insertBefore()移动节点，最后逐个设style.transform = `translate(${dx}px, ${dy}px)`回归原位 - 移动前强制触发重排：
getComputedStyle(card).transform，再设transform，否则动画不生效 - 别用
grid-area或order属性控制顺序——它们静态、难调试、不兼容老浏览器
最易被忽略的是：拖拽结束后的 DOM 顺序变更，必须同步到数据模型，否则下次初始化时 layout 会还原成旧顺序；而数据模型如果没做深 clone，多个卡片共用同一份配置引用，改一个就全变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
