Sortable
拖拽排序 · @dnd-kit headless + 键盘可拖(Space 抓起/方向键移动) + 手柄/整项两式 + 横竖向 · 受控 onChange(arrayMove)
拖拽调整列顺序（手柄拖动 / 聚焦手柄后 Space 抓起 · 方向键移动 · Space 放下）
- 订单编号唯一标识
- 客户名称来自客户主数据
- 订单金额含税
- 订单状态枚举
- 负责人当前跟单人
- 创建时间可排序
当前顺序：订单编号 → 客户名称 → 订单金额 → 订单状态 → 负责人 → 创建时间
全状态
拖拽调整列顺序（手柄拖动 / 聚焦手柄后 Space 抓起 · 方向键移动 · Space 放下）
- 订单编号唯一标识
- 客户名称来自客户主数据
- 订单金额含税
- 订单状态枚举
- 负责人当前跟单人
- 创建时间可排序
当前顺序：订单编号 → 客户名称 → 订单金额 → 订单状态 → 负责人 → 创建时间
拖拽调整列顺序（手柄拖动 / 聚焦手柄后 Space 抓起 · 方向键移动 · Space 放下）
- 订单编号唯一标识
- 客户名称来自客户主数据
- 订单金额含税
- 订单状态枚举
- 负责人当前跟单人
- 创建时间可排序
当前顺序：订单编号 → 客户名称 → 订单金额 → 订单状态 → 负责人 → 创建时间
横向拖拽排序（看板列 / 筛选标签）
- 待处理
- 进行中
- 已完成
- 已归档
Playground
拖拽调整列顺序（手柄拖动 / 聚焦手柄后 Space 抓起 · 方向键移动 · Space 放下）
- 订单编号唯一标识
- 客户名称来自客户主数据
- 订单金额含税
- 订单状态枚举
- 负责人当前跟单人
- 创建时间可排序
当前顺序：订单编号 → 客户名称 → 订单金额 → 订单状态 → 负责人 → 创建时间
const [items, setItems] = useState(fields);
<Sortable
items={items}
onChange={setItems}
handle={true}
renderItem={(f) => <span>{f.label}</span>}
/>