React 怎么实现拖拽排序列表？

Question

React 怎么实现拖拽排序列表？

仓乃文 · Accepted Answer

实现拖拽排序最实用的方案是使用 @dnd-kit 库，它轻量、可访问性好、支持键盘操作。手动实现拖拽排序需要处理大量边界情况，不推荐。 @dnd-kit 基础用法： ```javascript import { DndContext, closestCenter } from "@dnd-kit/core"; import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; function SortableItem({ id, children }) { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); const style = { transform: CSS.Transform.toString(transform), transition, }; return (

{children}

); } function SortableList({ items, onReorder }) { return ( { const { active, over } = event; if (active.id !== over.id) { const oldIndex = items.findIndex((i) => i.id === active.id); const newIndex = items.findIndex((i) => i.id === over.id); onReorder(arrayMove(items, oldIndex, newIndex)); } }}> {items.map((item) => ( {item.name} ))} ); } ``` 补充说明： - @dnd-kit 支持键盘操作和屏幕阅读器，可访问性好 - arrayMove 来自 @dnd-kit/sortable，用于移动数组元素 - 拖拽手柄：用 useSortable 的 listeners 绑定到特定元素而非整个行 - react-beautiful-dnd 已停止维护，新项目推荐 @dnd-kit - 触摸设备需要额外配置传感器：TouchSensor