【dnd-kit】SortableContext の items・strategy の役割

dnd-kit を使って並び替え機能を実装する際、SortableContext を使う

このコンテキストが items と strategy というプロパティを持つが、それぞれがどのように動作に影響するのかを調べた

docs.dndkit.com

items の役割

items は、並び替え対象となる要素のIDリストを示すプロパティ

このリストによって、dnd-kit は「どの要素が並び替えの対象か」と「現在の順序」を認識する

注意点

• items に指定するIDは、useSortable に渡す id と一致させる必要がある
• items に指定するIDは、重複してはならない
• items の順序が、表示順と常に一致していることが重要
• 並び替え後は、状態管理側（例：Reactのstate）で items を更新する必要がある

使用例

<SortableContext items={['item-1', 'item-2', 'item-3']} strategy={verticalListSortingStrategy}>
  {items.map(id => (
    <SortableItem key={id} id={id} />
  ))}
</SortableContext>

strategy の役割

strategy は、並び替え時のレイアウト判定ロジックを指定するプロパティ

要素がどのように並んでいるか（縦方向・横方向・グリッドなど）に応じて適切な戦略を選ぶ

主な戦略

戦略名	説明
verticalListSortingStrategy	縦方向に並ぶリスト用
horizontalListSortingStrategy	横方向に並ぶリスト用
rectSortingStrategy	グリッドや自由配置向け

使用例

<SortableContext items={items} strategy={horizontalListSortingStrategy}>
  ...
</SortableContext>

注意点

• 適切な strategy を選ばないと、並び替えが正しく動作しない
• レイアウトが動的に変わる場合は、strategy を切り替える実装も検討する