DndContext、useDraggable 与 useDroppable

dnd-kit 中的每个拖放功能都必须使用 DndContext 组件包裹。DndContext 是协调中心：它跟踪活动拖动，在可拖动元素与可放置元素之间传递信息，并触发事件回调。通常应将它放在管理拖动状态的组件层级。

useDraggable({ id }) 钩子会使组件变为可拖动。它会返回四个关键值：属性（要展开到元素上的 ARIA 属性）、监听器（用于启动拖动的事件处理程序）、setNodeRef（用于绑定可拖动元素引用）以及变换（当前位移，格式为 {x, y, scaleX, scaleY}）。

要连接可拖动元素，请将 attributes 和 listeners 展开到元素上，并将 setNodeRef 作为 ref 属性传入。这些属性包括 role="button"、tabIndex 和 aria 属性。监听器会绑定 dnd-kit 用于检测拖动开始所需的指针和键盘事件处理程序。

useDraggable 返回的 transform 值在未拖动时为 null，拖动时则为坐标对象。您可以使用 @dnd-kit/utilities 包中的 CSS.Translate.toString(transform) 将其转换为 CSS 字符串。请将结果作为可拖动元素的 transform CSS 属性应用，使元素在视觉上跟随光标。

useDroppable({ id }) 钩子会将容器标记为有效的放置目标。它会返回 isOver（可拖动元素悬停在此可放置区域上时为 true 的布尔值）和 setNodeRef，用于将引用绑定到可放置元素。与 useDraggable 不同，它不需要展开任何事件监听器。

useDroppable 返回的 isOver 值可以让您在拖动期间提供视觉反馈。当 isOver 为 true 时，您可以为可放置区域应用高亮颜色、边框或背景变化。这有助于用户了解可以将项目放在哪里，对易用性和无障碍体验至关重要。

DndContext 上的 onDragEnd 回调会接收一个事件对象，其中包含两个重要属性：event.active 包含被拖动项目（包括其 id），event.over 包含放置目标（如果项目被放在任何可放置区域之外，则为 null）。您可以使用这些 ID 更新应用状态。

在 onDragEnd 中确认 event.over 不为空后，您需要更新状态以反映这次移动。例如，在看板中将卡片从一个列移动到另一个列时，您需要从源列中移除卡片，再将其添加到由 event.over.id 标识的目标列中。

DragOverlay 会渲染一个跟随光标的浮动预览。它会以门户形式渲染（位于正常 DOM 树之外），因此不会被设置了隐藏溢出的容器裁剪。与原始元素不同，覆盖层可以添加阴影、缩放变换或旋转效果，以表明该元素正在被拖动。

要在 DragOverlay 中渲染正确的内容，请使用 onDragStart 回调跟踪当前正在拖动的项目。将当前 ID 存储在状态中：setActiveDragId(event.active.id)。在 onDragEnd 中将其重置为空值。在 DragOverlay 内部，使用 activeDragId 查找正确的项目并渲染它。

一个真正的拖放界面会组合使用 DndContext、多个 useDraggable 元素、多个 useDroppable 区域，以及用于跟踪每个项目所在位置的状态管理。关键在于，dnd-kit 提供的是实现拖放的机制，而您需要负责在 onDragEnd 中更新状态，并重新渲染界面以反映新的排列。

哪个工具函数可以将 useDraggable 返回的 transform 对象转换为 CSS 变换字符串？

DndContext 是所有 dnd-kit 拖放操作的协调中心。useDraggable 为可拖动元素提供属性、监听器、setNodeRef 和变换。useDroppable 为放置目标提供 isOver 和 setNodeRef。onDragEnd 会提供 event.active.id 和 event.over?.id，供您更新状态。DragOverlay 会渲染基于门户的浮动预览。