dndkit翻译站点

核心定位

dnd kit 是一个面向现代前端框架的拖拽交互工具包，官方支持 React、Vue、Svelte 和 Solid。它的设计目标不是提供一套“开箱即用”的成品组件，而是将拖拽行为中涉及的状态管理、碰撞检测、传感器接入等底层逻辑抽离出来，让开发者按需组装。

与许多绑定单一框架的拖拽库不同，dnd kit 的核心逻辑与框架层解耦，各框架通过适配器接入。这意味着同一套拖拽交互模型可以在不同技术栈之间保持行为一致，团队切换框架时无需重新设计交互层。

主要能力

1. 状态管理

dnd kit 将拖拽过程拆分为明确的阶段：空闲、拖拽中、放置中、已放置、已取消。每个阶段的状态变更通过事件暴露，开发者可以在任意节点介入：

• onDragStart — 拖拽开始
• onDragMove — 拖拽移动
• onDragOver — 经过可放置区域
• onDragEnd — 拖拽结束
• onDragCancel — 拖拽取消

2. 碰撞检测算法

内置多种碰撞检测策略，覆盖不同场景：

3. 传感器体系

传感器负责将底层输入事件（鼠标、触摸、键盘）转换为统一的拖拽信号。dnd kit 默认提供 Pointer Sensor 和 Keyboard Sensor，前者处理鼠标与触摸屏，后者实现完整的键盘可访问性——方向键移动、空格键拾取/放置、Escape 取消。

4. 排序策略

针对列表排序场景，提供 arrayMove、arraySwap 等纯函数工具，不依赖任何框架，可直接用于状态更新。同时支持多容器之间的项目转移，配合 SortableContext 可构建跨列表拖拽排序。

适用场景与边界

适合以下需求：

• 需要精细控制拖拽交互细节的产品（看板、表单构建器、页面编辑器）
• 要求键盘可访问性和屏幕阅读器兼容的项目
• 技术栈涉及多个前端框架的团队

需要注意的边界：

• 不提供预设的拖拽视觉样式，动画和反馈需自行实现
• 学习曲线高于“即插即用”型组件库
• 复杂嵌套拖拽场景仍需额外设计状态结构

快速上手

以 React 为例，核心用法如下：

import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';

function DraggableItem({ id }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
  return (
    <button ref={setNodeRef} {...listeners} {...attributes}
      style={{ transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined }}>
      拖拽我
    </button>
  );
}

function DropZone({ id }) {
  const { setNodeRef, isOver } = useDroppable({ id });
  return <div ref={setNodeRef} style={{ background: isOver ? '#e0f0ff' : '#f5f5f5' }}>放置区域</div>;
}

整体结构为：DndContext 包裹拖拽作用域，useDraggable 声明可拖拽元素，useDroppable 声明可放置区域，事件回调中更新应用状态。

结论

dnd kit 的定位清晰：不替开发者做交互决策，而是提供一套可靠、可组合的拖拽基础设施。如果你的项目对拖拽体验有明确要求，且愿意投入一定开发成本来换取控制力，它是当前多框架生态下值得优先评估的选项。