辅助工具 / 02
拖拽排序
基于原生 HTML5 拖放实现的列表重排，支持基础列表、卡片模块、带手柄的长列表，以及拖拽上传区域。按住任意一项拖到目标位置即可看到占位与落点，拖拽过程中的样式由组件库统一提供。
基础排序列表
[data-sort] + .sort-item审批流程节点顺序
拖动调整顺序，顺序即审批流转顺序
1
自动通过
发起申请
申请人 · 必填 3 项材料
2
当前节点
直属主管审批
陈思远 · 超时 24 小时自动提醒
3
条件节点
财务复核
李彦 · 仅金额大于 5,000 元时触发
4
条件节点
法务会签
周航 · 合同类申请必填
5
高权限
总经理审批
赵敏 · 金额大于 50,000 元时触发
6
自动完成
归档与通知
系统节点 · 生成编号并推送结果
最近保存于 10-03 09:26 · 操作人 陈思远
当前顺序
第 1 位发起申请
第 2 位直属主管审批
第 3 位财务复核
第 4 位法务会签
第 5 位总经理审批
第 6 位归档与通知
拖拽结束后，列表会把新顺序写回表单字段并调用保存接口。
规则
固定节点不可拖动
置灰项保持原位置，拖拽时自动跳过
支持键盘排序
聚焦后按 ↑ ↓ 移动，按空格确认落点
跨列表拖拽需显式开启
默认只在同一容器内排序，避免误操作
卡片模块排序
card sort · 首页模块首页模块顺序
拖动调整小程序首页各模块的展示顺序
轮播 Banner
3 张主图 · 自动播放 5 秒
金刚区
8 个入口 · 两行四列
限时秒杀
倒计时 2 小时 18 分
个性化推荐流
千次曝光点击率 4.8%
优惠券领取
4 张券 · 领取率 62%
顺序调整后 10 秒内生效，已进入首页的用户会在下次冷启动时更新。
拖拽上传 · 两种状态
把文件拖到这里
或点击选择本地文件
默认态 .upload
松开鼠标即可上传
边框与文字同时反色高亮
拖入态 .upload.drag
文件拖入时给容器加 .drag 类，边框由灰转黑、文字提亮；拖出或投放后移除该类。
上传队列
图
64%
banner-home-0912.png
图
完成
icon-kongfu.svg
已上传 · 4.2 KB
排序结果输出
{
"formId": "approval-flow-2418",
"order": [
"apply",
"manager-approve",
"finance-review",
"legal-countersign",
"gm-approve",
"archive"
],
"updatedAt": "2026-10-03T09:26:41+08:00"
}
落库时只提交节点标识与顺序号，避免整表重写。
触屏设备的兼容提示
原生 HTML5 拖放在移动端浏览器上支持不完整。触屏场景请改用长按 + 指针事件实现，或在拖拽区域内提供上下移动按钮作为兜底操作。