カスタムドラッグオーバーレイとマルチコンテナDnD

DragOverlay は、コンテンツを React ポータルとしてレンダリングし、DndContext の DOM ツリー内ではなく document.body に直接追加します。そのため、overflow:hidden や overflow:scroll のコンテナによって切り取られることはなく、手動で z-index を管理しなくても常に他のすべての要素の上に表示されます。

DragOverlay は元の要素から分離されているため、元の要素に適用するとレイアウトを崩してしまうような視覚スタイルも設定できます。ドロップシャドウ、スケール変換（元の要素より少し大きくする）、回転効果などを追加できます。こうした視覚的な手がかりによって、項目が「持ち上げられ」、動いていることをユーザーに伝えられます。

DragOverlay は何をレンダリングするか知る必要があります。状態でアクティブなドラッグ ID を追跡し、onDragStart で event.active.id を使って設定し、onDragEnd で null にして消去します。DragOverlay 内では、その ID を使って対応する項目のデータを検索し、正しいプレビューコンポーネントをレンダリングします。

DragOverlay を使う場合、元のドラッグ可能な項目はドラッグ中に視覚的なプレースホルダーになるようにします。useSortable を使っている場合は、isDragging が true のときに opacity: 0 または破線のボーダーを適用します。これにより、ドラッグがキャンセルされた場合に項目が戻る「スロット」と、新しい位置へ移動するときに残す空きが示されます。

複数コンテナのドラッグ＆ドロップでは、項目を 2 つ以上の別々のリスト間でドラッグできます。セットアップでは、すべてのコンテナを 1 つの DndContext でラップし、各コンテナに独自の SortableContext を設定します。衝突を防ぐため、すべてのコンテナの項目 ID はグローバルに一意でなければなりません。

コンテナ間のアニメーションを滑らかにするには、onDragEnd を待つのではなく onDragOver で状態を更新します。ドラッグ中の項目が新しいコンテナに入ったら、移動元のコンテナから移動先のコンテナへすぐに移動します。これにより、項目がどこに配置されるかをリアルタイムで視覚的にフィードバックできます。

複数の SortableContext インスタンス間でドラッグする場合、すべての項目 ID は各リスト内だけでなく、DndContext 全体で一意でなければなりません。2 つのコンテナが同じ ID を共有すると、dnd-kit はどの項目がアクティブなのか判別できません。UUID を使うか、コンテナ名を ID に付けて、グローバルな一意性を確保してください。

useDraggable と useSortable は data オプションを受け取ります：useSortable({ id, data: { containerId, type } })。このデータは、ドラッグイベントのコールバックで event.active.data.current として利用できます。複数コンテナのシナリオでは、移動元のコンテナ ID を data に保存し、onDragOver で使って項目の移動元を確認できます。

複数コンテナの状態には通常、コンテナ ID をキーとし、それぞれに項目の配列を持つオブジェクトを使います。onDragOver で、アクティブな項目が over の対象とは異なるコンテナにある場合は、移動元のコンテナ配列から項目を削除し、正しい位置に移動先のコンテナ配列へ挿入します。

KeyboardSensor は複数コンテナの DnD に対応しています。ユーザーは矢印キーを押してコンテナ内の項目間を移動でき、コンテナの端に到達すると、隣接するコンテナへそのまま移動できます。SortableContext の collisionDetection アルゴリズムが、位置に基づいて最も近い有効なドロップ先を判定します。

DndContext は、ドラッグ中の項目がどのドロップ可能要素の上にあるかを計算する方法を決める collisionDetection プロパティを受け取ります。デフォルトの closestCenter は、ほとんどのリストで適切に機能します。closestCorners はグリッドに適しています。pointerWithin は、カーソルが実際にドロップ可能要素の内部にある場合にのみ、その要素をアクティブにします。

DragOverlay は DOM のどこにコンテンツをレンダリングしますか？

DragOverlay は document.body へのポータルとしてレンダリングされ、レイアウト上の制約から視覚的に独立します。onDragStart/onDragEnd で activeDragId を追跡し、正しいオーバーレイコンテンツをレンダリングします。複数コンテナの DnD では、1 つの DndContext 内に複数の SortableContext インスタンスを配置し、ID をグローバルに一意にします。スムーズなコンテナ間アニメーションのために onDragOver で状態を更新し、移動元コンテナのメタデータには event.active.data.current を使います。