並べ替え可能なリストのためのSortableContext

SortableContext は、並べ替え可能なリストをラップする dnd-kit 専用コンポーネントです。useDraggable と useDroppable が任意のドラッグ＆ドロップを処理するのに対し、SortableContext は、リスト内の項目を新しい位置にドラッグして並べ替えるケースに特化しています。

SortableContext には items プロパティが必要です。これは、子の sortable コンポーネントで使われる ID と一致する、一意な文字列または数値の ID の配列です。この配列の順序が項目の現在の順序を定義します。この配列を状態内で更新すると、リストは新しい順序で再レンダリングされます。

SortableContext は、項目の並べ替え方法を制御する strategy プロパティを受け取ります。verticalListSortingStrategy は縦方向のリスト用で、縦位置に基づいて挿入位置を計算します。horizontalListSortingStrategy は横方向のリスト用です。rectSortingStrategy はグリッド用です。レイアウトに合った戦略を選択してください。

SortableContext 内では、各リスト項目が useDraggable の代わりに useSortable({ id }) フックを使います。useSortable は useDraggable の上位互換であり、同じ attributes、listeners、setNodeRef、transform に加えて、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 transform を提供し、邪魔にならないように移動させます。この transform に CSS transition を追加すると、スムーズな移動アニメーションになります。

ソート可能な項目の transform プロパティに CSS transition を適用します：transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined。項目をドラッグしている間は、カーソルに直接追従させるため transition は必要ありません。項目が押し出されるときは、transition によって滑らかなスライドアニメーションが生まれます。

最良の UX を実現するには、SortableContext と DragOverlay を組み合わせます。リスト内のドラッグ中の項目は、isDragging を使って半透明のプレースホルダーになり、DragOverlay はカーソルに追従する、塗りつぶされた浮き上がったコピーをレンダリングします。この方法により、ドラッグ中の項目が位置間を移動する際の視覚的なちらつきを防げます。

SortableContext は、縦方向のリスト（タスクボードや todo リスト）にも横方向のリスト（タブバーや画像カルーセル）にも同じように使えます。strategy プロパティを変更して戦略を切り替えます。rectSortingStrategy を使えば、グリッドレイアウトにも利用できます。この戦略は、ドラッグ位置に基づいて最も近いグリッドセルを計算します。

ソート可能なリストを並べ替えるために onDragEnd 内で arrayMove を呼び出すとき、どの引数を渡しますか？

SortableContext は並べ替え可能なリストをラップし、一意な ID の items 配列と、戦略（縦方向、横方向、またはグリッド）を必要とします。各項目は useDraggable の代わりに useSortable を使い、isDragging と overIndex を利用できます。onDragEnd では、arrayMove(items, oldIndex, newIndex) によって配列を並べ替えます。transform に CSS transition を設定すると、押し出された項目が滑らかにアニメーションします。