dnd-kit 架构与无障碍优先设计

react-beautiful-dnd 曾是 React 最常用的拖放库，但它已于 2023 年正式归档，不再维护。社区很快转向 dnd-kit，将其作为推荐替代方案；dnd-kit 从头设计，面向现代 React，并将无障碍支持纳入考量。

dnd-kit 围绕三个关键架构概念构建：DndContext 管理所有拖动状态，并协调可拖动元素与可放置元素之间的关系；传感器抽象输入方式，使同一套拖动逻辑能够处理鼠标、触摸和键盘；修饰符则可以吸附、限制或变换拖动轨迹。

dnd-kit 内置了三种传感器。PointerSensor 通过统一的 Pointer Events API 同时处理鼠标和触摸输入。KeyboardSensor 支持完全通过键盘进行拖放。TouchSensor 处理旧版触摸事件。您可以通过 DndContext 上的 sensors 属性配置传感器。

dnd-kit 内置了面向无障碍的键盘导航。用户按空格键拿起项目，按箭头键将其移动到新位置，再次按空格键放下项目，按Escape 键取消拖动且不做任何更改。这些操作会自动播报给屏幕阅读器。

dnd-kit 会自动为可拖动项目应用 aria-grabbed，向辅助技术表明项目当前是否处于抓取状态。它会在可放置区域上使用 aria-dropeffect，说明项目放下后将发生什么。实时区域会播报状态更新，让屏幕阅读器用户听到“项目已拿起”或“项目已成功放下”等确认信息。

dnd-kit 的设计支持摇树优化，也就是说，您只需导入实际使用的部分。它不会捆绑 CSS，所有视觉样式都由您负责，因此您可以完全控制可拖动元素、覆盖层和放置区域的外观。这样可以使捆绑包大小保持最小。

DndContext 提供三个主要事件回调，用于跟踪拖动生命周期。onDragStart 会在用户开始拖动时触发，并接收活动项目的 ID。onDragOver 会在拖动项目经过可放置目标时持续触发。onDragEnd 会在拖动完成时触发，并提供活动项目和放置目标。

您可以将传感器配置数组与 useSensors 钩子结合，通过 sensors 属性传递给 DndContext。每个传感器都使用 useSensor(SensorClass, options) 初始化。例如，您可以为 PointerSensor 配置最小拖动距离，以避免用户点击时意外触发拖动。

修饰符会在拖动坐标应用到拖动元素之前对其进行变换。restrictToVerticalAxis 会将移动限制在单一方向。restrictToParentElement 会将拖动项目限制在其容器内。snapCenterToCursor 会吸附元素，使其中心跟随光标。您可以在数组中组合多个修饰符。

每个可拖动元素和可放置元素都需要一个唯一的字符串或数字 ID。这些 ID 是 dnd-kit 跟踪拖动对象及其放置位置的主要方式。在 onDragEnd 中，您可以读取 event.active.id 获取被拖动项目，读取 event.over?.id 获取放置目标，从而更新应用状态。

许多拖放库都把键盘支持当作事后补充，而 dnd-kit 则将无障碍能力置于设计核心。KeyboardSensor 是与 PointerSensor 具有同等能力的一等功能。所有 ARIA 属性都会自动管理，您还可以通过 DndContext 上的 accessibility 属性配置自定义播报内容。

dnd-kit 使用哪个按键来取消正在进行的键盘拖动而不做任何更改？

dnd-kit 取代了已归档的 react-beautiful-dnd，成为 React 拖放领域的社区标准。其架构以 DndContext 管理状态、传感器抽象输入（Pointer、Keyboard、Touch），以及修饰符限制移动为核心。无障碍支持是一等功能：内置 ARIA 属性、实时区域播报和完整的键盘导航。