dnd-kit 我称之为拖拽组件中的王者 git链接 文章地址 用过react-dnd和react-beautiful-dnd都没有dnd-kit组件灵活以及暴露的数据多

安装 使用 1.需要引入 DndContext 组件，他类似 react 的 Context 向下传递状态，他必须在拖拽组件的最外层 2.使用 useDroppable 创建一个可以掉落的区域

dnd-kit 仓库 README.md、官方文档中 Overview、Installation、Quick start 的中文翻译

基础概念 DndContext 用于包装拖拽根组件，Draggable 和 Droppable 都需要包裹在 DndContext 内 Droppable 用于包装接收拖拽元素的组件，使组件能够放置

由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好，于是决定采用这个库实现。

鼠标框选的需求平常并不常见，但若碰到了，你会做吗？一个较为复杂的组件，api 要如何设计？怎么将平常所学运用其中？

本篇为 dnd-kit 官方文档 中 DndContext 一章的中英对照翻译 对于碰撞检测知之甚少，有关章节请大佬们指正。

Dnd Kit 是一个轻量级、模块化、高性能、易于访问和可扩展的 React 拖放工具包。它可以让你轻松拖放组件。