自定义拖动覆盖层与多容器拖放

DragOverlay 会将其内容渲染为 React 门户，直接附加到 document.body，而不是 DndContext 的 DOM 树内部。因此，它不会被设置了隐藏溢出或滚动溢出的容器裁剪，并且始终显示在其他元素上方，无需手动管理层叠索引。

由于 DragOverlay 与原始元素彼此独立，它可以使用一些应用到原始元素上会破坏布局的视觉样式。您可以添加阴影、缩放变换（使其比原始元素稍大）或旋转效果。这些视觉提示会向用户传达该项目已被“抬起”并正在移动。

DragOverlay 需要知道要渲染什么。请在状态中跟踪当前拖动的 ID：在 onDragStart 中使用 event.active.id 设置它，并在 onDragEnd 中将其清除为空值。在 DragOverlay 内部，使用该 ID 查找对应的项目数据，并渲染正确的预览组件。

使用 DragOverlay 时，原始可拖动项目在拖动过程中应变成视觉占位符。如果使用 useSortable，请在 isDragging 为 true 时将不透明度设为 0，或应用虚线边框。这样可以显示项目在拖动取消时将返回的“位置”，以及它移动到新位置时留下的空缺。

多容器拖放意味着项目可以在两个或更多相互独立的列表之间拖动。设置时需要使用一个 DndContext 包装所有容器，并为每个容器设置各自的 SortableContext。所有容器中的项目 ID 都必须全局唯一，以防止发生冲突。

为了实现平滑的跨容器动画，请在 onDragOver 中更新状态，而不要等到 onDragEnd。被拖动项目进入新容器时，应立即将其从源容器移动到目标容器。这样可以实时反馈项目将要落下的位置。

在多个 SortableContext 实例之间拖动时，所有项目 ID 必须在整个 DndContext 中保持唯一，而不仅仅是在各自的列表内唯一。如果两个容器共享同一个 ID，dnd-kit 就无法确定哪个项目处于活动状态。请使用通用唯一标识符（UUID），或在 ID 前加上容器名称，以确保全局唯一性。

useDraggable 和 useSortable 接受一个 data 选项：useSortable({ id, data: { containerId, type } })。这些数据可以在拖动事件回调中通过 event.active.data.current 访问。在多容器场景中，您可以将源容器 ID 存储在数据中，并在 onDragOver 中使用它来了解项目来自哪里。

多容器状态通常使用一个以容器 ID 为键的对象，每个键对应一个项目数组。在 onDragOver 中，如果活动项目所在的容器与放置目标所在的容器不同，就从源容器数组中移除该项目，并将其按正确位置插入目标容器数组。

KeyboardSensor 支持多容器拖放。用户可以按方向键在容器内的项目之间移动；到达容器边缘时，还可以继续移动到相邻容器中。SortableContext 的 collisionDetection 算法会根据位置确定最近的有效放置目标。

DndContext 接受一个 collisionDetection 属性，用于决定如何计算被拖动项目当前位于哪个可放置区域上方。默认的 closestCenter 适用于大多数列表。closestCorners 更适合网格。只有当光标实际位于可放置区域内部时，pointerWithin 才会激活该区域。

DragOverlay 会渲染为指向 document.body 的门户，从而不受布局限制的影响。请在 onDragStart/onDragEnd 中跟踪 activeDragId，以渲染正确的覆盖层内容。多容器拖放会在一个 DndContext 内使用多个 SortableContext 实例，并要求所有 ID 全局唯一。使用 event.active.data.current 获取源容器元数据，并在 onDragOver 中更新状态，就能实现平滑的跨容器动画。