浅说React-Dnd的使用

前言(学习原因)

近期在工作中遇到一个新的需求：具体大概效果看下面.gif

当时看到这个需求经师兄提醒知道了React-Dnd，想到了表格 Table - Ant Design里有一个可拖拽表格的效果，照搬到了项目里发现不太能满足我们的需求，就去搜了一些资料了解了React-Dnd的一下原理

React-Dnd

React DnD 是一个专注于数据变更的 React 拖拽库， 对 HTML拖拽API进行了封装，通俗的将，你拖拽改变的不是页面视图，而是数据。React DnD 不提供炫酷的拖动体验，而是通过帮助我们管理拖拽中的数据变化，再由我们根据这些数据进行渲染。

这样子在处理拖拽的时候就可以关注于数据方面的变化，而不用费心去维护拖拽中的一些中间状态，更不用自己去添加，移除事件。

先知道咋安装

tnpm(npm) install react-dnd -S // react-dnd包,其核心包 
tnpm(npm) install react-dnd-html5-backend -S // 拖拽的底层实现所需要的库 

除了react-dnd外还需要react-dnd-html5-backend这个包，它存在才会允许 React DnD 底层的 HTML5 拖放 AP，使得HTML 拖放界面使应用程序能够在浏览器中使用拖放功能

引入使用

//引入
import {DndProvider, useDrag, useDrop} from 'react-dnd'
import {HTML5Backend} from 'react-dnd-html5-backend'

三个核心点

通过使用React DnD这个库，我认为里面最有用的部分包含一个组件和两个Hook API，它们分别是：

• DndProvider组件
• useDrag函数
• useDrop函数

React-DnD实现

DndProvider注入

如果想要使用 React DnD，首先需要在外层元素上加一个 DndProvider，得先声明一下拖拽的对象

比较官方解释：

DndProvider组件为您的应用程序提供React-DnD功能。必须通过backend参数将其注入后端，但是也可以将其注入window对象。

• backend: 必填，一个 React DnD 后端，实现DnD的方式，目前官方文档有三个，分别为：react-dnd-html5-backend、react-dnd-touch-backend、react-dnd-test-backend，但是常用的还是react-dnd-html5-backend，或者也可以自己写backend后端。。
• context: 选填，用户配置后端的上下文，这取决于后端的实现。
• options: 选填，配置后端对象，自定义时可以传入backend。

比较通俗解释：