用于可重排序列表的 SortableContext

SortableContext 是 dnd-kit 中用于包装可重新排序列表的专用组件。useDraggable 和 useDroppable 处理任意形式的拖放，而 SortableContext 专门处理列表项目需要通过拖动到新位置来重新排序的情况。

SortableContext 要求提供 items 属性：一个由唯一字符串或数字 ID 组成的数组，这些 ID 必须与子级可排序组件所使用的 ID 相匹配。该数组的顺序定义了项目的当前顺序。当您在状态中更新此数组时，列表会按新顺序重新渲染。

SortableContext 接受一个 strategy 属性，用于控制项目的排序方式。verticalListSortingStrategy 用于垂直列表，会根据垂直位置计算插入点。horizontalListSortingStrategy 用于水平列表。rectSortingStrategy 用于网格。请选择与布局相匹配的策略。

在 SortableContext 内部，每个列表项目都使用 useSortable({ id }) 钩子，而不是 useDraggable。useSortable 是 useDraggable 的超集——它返回相同的属性、监听器、setNodeRef 和变换，另外还返回 isDragging 和 overIndex 等专门用于排序的值。

来自 useSortable 的 isDragging 值会在项目正被拖动时保持为 true。通常，您可以利用它降低列表中原始项目的不透明度，或在项目被拖动时为其添加占位符样式。这个视觉上的空缺会向用户显示该项目当前位于列表中的位置。

dnd-kit 从 @dnd-kit/sortable 导出了 arrayMove(array, fromIndex, toIndex) 工具。它会返回一个新数组，其中位于 fromIndex 的项目被移动到 toIndex。排序拖动完成后，更新状态数组的标准方式就是使用它。

在可排序列表的 DndContext onDragEnd 回调中，您可以使用 items.indexOf(event.active.id) 和 items.indexOf(event.over?.id) 找到旧索引和新索引。如果两个索引都有效且彼此不同，就调用 setItems(arrayMove(items, oldIndex, newIndex)) 重新排列数组。

拖动某个项目时，列表中的其他项目会动画移动到新位置，以显示被拖动项目将要落下的位置。useSortable 会为每个未被拖动的项目提供 CSS 变换，使其移到一边。为此变换添加 CSS 过渡效果，就能创建平滑的移动动画。

为可排序项目的变换属性应用 CSS 过渡效果：transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined。项目被拖动时不需要过渡效果（它应该直接跟随光标）。项目被挤开时，过渡效果会创建平滑的滑动动画。

为了获得最佳用户体验，请将 SortableContext 与 DragOverlay 组合使用。列表中的被拖动项目会变成半透明的占位符（使用 isDragging），而 DragOverlay 会渲染一个实体且具有悬浮感的副本，跟随光标移动。这种方式可以避免被拖动项目在不同位置之间跳动所造成的视觉问题。

SortableContext 同样适用于垂直列表（任务板、待办列表）和水平列表（标签栏、图片轮播）。您可以通过更改策略属性，在不同策略之间切换。您甚至可以使用 rectSortingStrategy 实现网格布局，它会根据拖动位置计算最近的网格单元。

在 onDragEnd 中调用 arrayMove 重新排列可排序列表时，需要传入哪些参数？

SortableContext 包装可重新排序的列表，并要求提供由唯一 ID 组成的 items 数组，以及一种策略（垂直、水平或网格）。每个项目使用 useSortable 而不是 useDraggable，因此会获得 isDragging 和 overIndex。在 onDragEnd 中，arrayMove(items, oldIndex, newIndex) 会重新排列数组。对变换应用 CSS 过渡效果，可以平滑地为被挤开的项目制作动画。