Layui 无内置卡片拖拽功能，需自行实现：可用原生 drag API 实现列表排序，或用绝对定位+鼠标事件实现自由画布布局，推荐结合 Sortable.js 等轻量库，并注意防误触、边界限制、移动端适配及状态持久化。
Layui 本身没有内置的卡片（card）拖拽布局功能，它的 layui.card 并非官方标准组件——Layui 官方文档中并无 card 模块。你看到的“Layui 卡片”通常是开发者基于 layui-col、layui-panel 或自定义 div + CSS 实现的视觉卡片容器。要实现卡片拖拽调整页面布局位置，本质是实现**自由拖拽 + 位置持久化 + 布局重排**，需自行集成逻辑。
用原生 drag API 实现卡片拖拽排序（适用于横向/纵向列表）
适合卡片呈单列或单行排列，拖拽后改变 DOM 顺序（如仪表盘模块排序）：
- 给每张卡片（
<div class="card-item">）添加draggable="true" - 监听
dragstart：记录被拖卡片元素及原始索引 - 监听容器的
dragover：调用e.preventDefault()启用放置；用e.clientY和getBoundingClientRect()判断插入位置（上半区→插前，下半区→插后） - 监听
drop：将卡片insertBefore或appendChild到目标位置，再同步更新数据源（如 JS 数组），必要时触发重新渲染（如重绘 laytpl 或更新 Vue/React state）
用绝对定位 + 鼠标事件实现自由画布式拖拽（适合网格/画布布局）
适合类似后台仪表盘、看板（Kanban）等可任意摆放卡片的场景：
- 卡片容器设为
position: relative，卡片自身设为position: absolute - 监听卡片
mousedown：计算鼠标与卡片左上角偏移（clientX - left），并标记为“正在拖拽” - 绑定
document.mousemove：根据鼠标坐标和偏移量实时设置卡片style.left/style.top - 绑定
document.mouseup：停止拖拽，保存当前left/top到 localStorage 或后端（如{id: 'card1', x: 120, y: 85}） - 页面加载时读取位置配置，初始化各卡片坐标
配合 layui.grid 或第三方库简化开发
若卡片按栅格（如 layui-row/layui-col）布局，纯靠拖拽会破坏响应式结构。建议：
- 不直接拖动 DOM，而是拖动一个“占位标识”，松手后交换两个卡片对应的数据项，再用
layui.jquery重排.layui-col顺序 - 引入轻量库如 dragula 或 Sortable.js，它们兼容 layui 的 DOM 结构，只需初始化容器：
new Sortable(cardContainer, { animation: 150 }) - 避免使用 jQuery UI（体积大、与 layui 冲突风险高）
必须处理的关键细节
否则拖拽体验会出问题：
-
防误触：在
mousedown或dragstart中过滤可交互子元素，如if (e.target.matches('input, button, a, .layui-btn')) return -
边界限制：自由拖拽时，
left/top应约束在容器内（如Math.max(0, Math.min(maxX, x))） -
移动端适配：原生 drag 事件在 iOS/Android 不生效，需监听
touchstart/touchmove/touchend并模拟，且注意e.touches[0].clientX取值 -
状态持久化：拖拽结束后立即将新顺序或新坐标存入
localStorage或提交到接口，否则刷新即还原
