LogoLogo
首页示例Github
  • 概述
  • 介绍
    • 安装指南
    • 快速开始
  • API 文档
    • DndContext
      • 碰撞检测算法
      • useDndContext
      • useDndMonitor
    • Droppable
      • useDroppable
    • Draggable
      • useDraggable
      • 拖动浮层
    • Sensors
      • Pointer
      • Mouse
      • Touch
      • Keyboard
    • Modifiers
  • 预置能力
    • Sortable
      • Sortable Context
      • useSortable
  • 指南
    • 无障碍指南
  • 说明
由 GitBook 提供支持
在本页
  • 安装包
  • 核心库
  • 修改器
  • 预置能力
  • 开发版本

这有帮助吗?

在GitHub上编辑
  1. 介绍

安装指南

上一页概述下一页快速开始

最后更新于1年前

这有帮助吗?

开始使用 @dnd-kit 前,请先通过 npm 或 yarn 安装核心库:

npm install @dnd-kit/core

你还需要确保已经安装了对等依赖 (peer dependencies),可能你已经在项目中安装了 react 和 react-dom,如果还没有则需要进行安装:

npm install react react-dom

安装包

@dnd-kit 是一个 。根据使用需要,你可能还要安装 @dnd-kit 命名空间下的其它子包。

核心库

为了保持核心库足够小,@dnd-kit/core 中仅包含了大部分用户在大多数时候使用拖拽功能的主要能力:

  • 可用于下列概念的 Hooks:

  • 传感器 (Sensors):

修改器

利用修改器可以动态地修改传感器检测到的移动坐标。它们的使用场景非常广泛,例如:

  • 将移动限制在单一坐标轴上

  • 将移动限制在可拖拽节点容器的边框内

  • 将移动限制在可拖拽节点的滚动容器边框内

  • 施加阻力或夹紧运动 (clamping the motion)

使用修改器之前,请先通过 yarn 或 npm 安装依赖包。

npm install @dnd-kit/modifiers

预置能力

如果你打算从头开始建立一个可拖拽排序的界面, @dnd-kit/core 提供了所有你需要的构建模块,但幸运地是你并不需要这样做。

如果你打算直接开发一个可拖拽排序的界面,强烈建议你试试 @dnd-kit/sortable,它是建立在 @dnd-kit/core 之上的一个薄层,为了达到丝滑、灵活和易使用地可拖拽排序的界面,做了很多的优化。

npm install @dnd-kit/sortable

开发版本

合并到 @dnd-kit 主分支的每个 commit 都会触发一次开发构建,并在 npm 仓库中发布一个打上 next 标签的包。

如果你想要在正式版本发布之前尝鲜一下,请安装每个 @dnd-kit 子包的 @next 版本。

npm install @dnd-kit/core@next @dnd-kit/sortable@next

开发版本可能不稳定,如果你打算在生产环境中使用,建议你锁定特定的开发版本号。

修改器的代码仓库中包含了许多有用的修改器,可以应用于 以及 。

monorepo
Context provider
可拖拽 (Draggable)
可放置 (Droppable)
拖拽浮层 (Drag Overlay)
指针 (Pointer)
鼠标 (Mouse)
触摸 (Touch)
键盘 (Keyboard)
无障碍功能
DndContext
DraggableClone
Sortable