dnd kit

• 功能丰富：可定制的碰撞检测算法、多个激活器、可拖动覆盖、拖动手柄、自动滚动、约束等等。
• 专为 React 构建：公开诸如useDraggable和useDroppable之类的钩子。并且不会强迫您重新构建应用程序或创建额外的包装 DOM 节点。
• 支持广泛的用例：列表、网格、多个容器、嵌套上下文、可变大小的项目、虚拟化列表、2D 游戏等。
• 零依赖和模块化：库的核心缩小后重量约为 10kb，并且没有外部依赖。它是围绕内置的 React 状态管理和上下文构建的，这使库保持了精简。
• 内置支持多种输入法：指针、鼠标、触摸和键盘传感器。
• 完全可定制和可扩展：定制每个细节：动画、过渡、行为、样式。构建您自己的传感器、碰撞检测算法、自定义按键绑定等等。
• 辅助功能：键盘支持、合理的默认咏叹调属性、可自定义的屏幕阅读器说明和内置的实时区域。
• 性能：它在构建时考虑了性能，以支持丝般流畅的动画。
• 预设：需要构建可排序的界面？查看@dnd-kit/sortable ，它是构建在@dnd-kit/core之上的薄层。未来会有更多预设。

文档

要了解如何开始使用dnd kit ，请访问官方文档网站。您将找到深入的 API 文档、提示和指南，帮助您构建拖放界面。

关键概念

dnd 套件的核心库公开了两个主要概念：

• 可拖动元素
• 可投放区域

使用useDraggable和useDroppable钩子增强现有组件，或者将两者结合起来创建可以拖放的组件。

使用<DndContext>提供程序处理事件并自定义可拖动元素和可放置区域的行为。配置传感器以处理不同的输入方法。

使用<DragOverlay>组件呈现可拖动的覆盖层，该覆盖层从正常文档流中删除并相对于视口定位。

查看我们的快速入门指南以了解如何开始。

可扩展性

可扩展性是dnd kit的核心。它的构建是精益且可扩展的。它附带了我们相信大多数人在大部分时间都需要的功能，并提供了扩展点以在@dnd-kit/core之上构建其余部分。

dnd 套件可扩展性级别的一个主要示例是可排序预设，它是使用@dnd-kit/core公开的扩展点构建的。

dnd 套件的主要扩展点是：

• 传感器
• 修饰符
• 约束条件
• 自定义碰撞检测算法

无障碍

构建可访问的拖放界面很困难； dnd 套件有许多合理的默认值和起点，可帮助您使拖放界面易于访问：

• 有关如何与可拖动项目交互的可自定义屏幕阅读器说明
• 可定制的实时区域更新，可实时提供屏幕阅读器公告，告知可拖放元素当前发生的情况。
• 应传递给可拖动项目的aria属性的合理默认值

请查看我们的辅助功能指南，详细了解如何帮助为屏幕阅读器提供更好的体验。

建筑学

与大多数拖放库不同， dnd 套件特意没有构建在 HTML5 拖放 API 之上。这是一个经过深思熟虑的架构决策，确实会带来一些权衡，您在决定使用它之前应该意识到这一点，但对于大多数应用程序来说，我们认为利大于弊。

HTML5 拖放 API 有一些严重的限制。它不支持触摸设备或使用键盘拖动项目，这意味着构建在其之上的库需要公开完全不同的实现来支持这些输入方法。它还不支持常见用例，例如锁定拖动到特定轴或容器的边界、自定义碰撞检测策略，甚至自定义拖动项目的预览。

虽然其中一些问题有解决方法，但这些解决方法通常会增加代码库的复杂性和库的整体包大小，并导致鼠标、触摸和键盘层之间的不一致，因为它们由完全不同的实现提供支持。

不使用 HTML5 拖放 API 的主要缺点是您将无法从桌面或窗口之间进行拖动。如果您想到的拖放用例涉及此类功能，那么您肯定会希望使用基于 HTML 5 拖放 API 构建的库。我们强烈建议您查看react-dnd，了解具有本机 HTML 5 拖放后端的 React 库。

表现

最小化 DOM 突变

dnd 套件可让您构建拖放界面，而无需在每次项目需要移动位置时改变 DOM。

这是可能的，因为当启动拖动操作时， dnd 套件会延迟计算并存储可放置容器的初始位置和布局。这些位置将传递到使用useDraggable和useDroppable的组件，以便您可以在拖动操作正在进行时计算项目的新位置，并使用不会触发重绘的高性能 CSS 属性将它们移动到新位置，例如translate3d和scale 。有关如何实现这一点的示例，请查看@dnd-kit/sortable库公开的排序策略的实现。

这并不是说在拖动时不能移动 DOM 中项目的位置，这是受支持的，有时是不可避免的。在某些情况下，除非将项目移动到 DOM 中，否则无法提前知道项目的新位置和布局。只需要知道，拖动时对 DOM 进行的此类突变成本要高得多，并且会导致重新绘制，因此如果可能的话，更喜欢使用translate3d和scale来计算新位置。

综合事件

dnd 套件还对所有传感器的激活器事件使用 SyntheticEvent 侦听器，这比手动向每个单独的可拖动节点添加事件侦听器提高了性能。

在@dnd-kit存储库中工作

此存储库中包含的包

• @dnd-kit/core
• @dnd-kit/accessibility
• @dnd-kit/sortable
• @dnd-kit/modifiers
• @dnd-kit/utilities

安装依赖项

您需要在根目录中安装所有依赖项。由于@dnd-kit是一个使用 Lerna 和 Yarn 工作区的 monorepo，因此不支持 npm CLI（仅支持yarn）。

yarn install

这将在每个项目中安装所有依赖项，构建它们，并通过 Lerna 符号链接它们

开发流程

在一个终端中，并行运行yarn start ：

yarn start

这会将每个包构建到<packages>/<package>/dist并在监视模式下运行项目，因此您在<packages>/<package>/src中保存的任何编辑都会导致重建到<packages>/<package>/dist 。结果将流式传输到终端。

跑步故事书

yarn start:storybook

运行故事书 打开 http://localhost:6006 以在浏览器中查看它。

与游乐场合作

您可以在由 Parcel 供电的游乐场中玩本地包。

yarn start:playground

这将在localhost:1234上启动 Playground。如果您让 lerna 在一个终端中以并行模式运行 watch，然后运行 ​​Parcel，则当您对源位于packages/*/src/*内部的任何导入模块进行更改时，您的 Playground 将会热重载。请注意，为了实现此目的，每个包的start命令都会向 TDSX 传递--noClean标志。这可以防止 Parcel 由于“找不到文件”错误而在重建之间爆炸。

重要的安全提示：在 Playground 中添加/更改包时，请在 package.json 中使用alias对象。这将告诉 Parcel 将它们解析到文件系统，而不是尝试从 NPM 安装软件包。它还修复了您可能遇到的重复 React 错误。

奔跑的柏树

（在第三个终端中）您可以运行 Cypress，它将针对 Storybook 运行集成测试。