Repolode
clauderic

clauderic/dnd-kit

一个现代、轻量的网页拖放工具包,核心与框架无关,并提供 React、Vue、Svelte、SolidJS 适配层。

Star
17,738
Fork
927
未关闭 Issue
134
最近提交
7天前

这是什么?

dnd-kit 是一个用于在网页中构建拖放交互界面的工具包。它采用分层设计:与框架无关的核心(@dnd-kit/abstract)、DOM 实现(@dnd-kit/dom),以及针对 React、Vue、Svelte、SolidJS 的轻量适配层,也可以直接用原生 JavaScript 使用。

它支持列表、网格、多容器、嵌套上下文、尺寸不一的元素和虚拟列表等场景,内置指针、鼠标、触摸和键盘传感器。开发者可以自定义传感器、碰撞检测算法和键位绑定。针对常见的可排序列表,项目还提供了基于核心构建的 sortable 模块。

在无障碍方面,它提供键盘操作、默认 ARIA 属性、可自定义的屏幕阅读器提示和实时区域。项目使用 TypeScript 编写,采用 MIT 许可证。

核心功能

  • 01与框架无关的核心,并提供 React、Vue、Svelte、SolidJS 适配层
  • 02内置指针、鼠标、触摸和键盘传感器
  • 03支持列表、网格、多容器和虚拟列表
  • 04可自定义传感器、碰撞检测和键位绑定
  • 05基于核心构建的 sortable 模块,用于可重排列表
  • 06提供键盘操作和默认 ARIA 属性等无障碍支持

适用场景

  • 在 React 或 Vue 应用中实现可排序列表或看板式界面
  • 构建多容器的拖放网格或布局
  • 为网页界面添加支持触摸和键盘操作的重新排序功能

快速上手

  1. 1

    选择你的框架,并按照 dndkit.com 上的快速入门指南操作

  2. 2

    使用 bun 安装仓库依赖

    bun install
  3. 3

    启动开发模式

    bun run dev

标签

常见问题

dnd-kit 是什么?
一个现代、轻量的网页拖放工具包,核心与框架无关,并提供 React、Vue、Svelte、SolidJS 适配层。 dnd-kit 是一个用于在网页中构建拖放交互界面的工具包。它采用分层设计:与框架无关的核心(@dnd-kit/abstract)、DOM 实现(@dnd-kit/dom),以及针对 React、Vue、Svelte、SolidJS 的轻量适配层,也可以直接用原生 JavaScript 使用。
dnd-kit 可以免费使用吗?用的什么许可证?
dnd-kit 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
dnd-kit 还在维护吗?
活跃维护中。dnd-kit 最近一次提交是在 2026年10月15日。
dnd-kit 适合用来做什么?
在 React 或 Vue 应用中实现可排序列表或看板式界面 构建多容器的拖放网格或布局 为网页界面添加支持触摸和键盘操作的重新排序功能
dnd-kit 怎么安装和运行?
选择你的框架,并按照 dndkit.com 上的快速入门指南操作 使用 bun 安装仓库依赖: bun install 启动开发模式: bun run dev
在哪里获取 dnd-kit?
源代码和安装说明在 GitHub 上:https://github.com/clauderic/dnd-kit

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目