一、配景

近期在职责中遭受了一个新的需求，该需求需要终了某个组件的拖拽，靠近这个需求的第一个形态笃定是问问度娘和用最大同性交友网站进行搜索，最终皇天不负有心人，让我找到了这个17k star的React拖拽库——React DnD。

二、肤浅使用 2.1 安设

npm install react-dnd -S // react-dnd包，其中枢包 npm install react-dnd-html5-backend -S // 拖拽的底层终了所需要的库 

2.2 三个中枢点

通过使用React DnD这个库，我觉得内部最有效的部分包含一个组件和两个Hook API，它们分辩是：

DndProvider组件 useDrag函数 useDrop函数

2.2.1 DndProvider组件

如若想让某一本色使用React DnD的才能，需要将该部分用DndProvider进行包裹，其收受参数如下所示：

backend：必填。一个React DnD后端。现在官方文档有三个，分辩为：react-dnd-html5-backend、react-dnd-touch-backend、react-dnd-test-backend，然而常用的照旧react-dnd-html5-backend。 context：可选的。用于竖立后端的后端崎岖文。这取决于后端终了。 options：可选的。用于竖立后端的选项对象。这取决于后端终了。

底下来一齐望望该组件的肤浅使用：

import {DndProvider} from 'react-dnd'; import {HTML5Backend} from 'react-dnd-html5-backend';  function App() {   return (     <div className="App">       <DndProvider backend={HTML5Backend}>         此处将放拖拽有关本色       </DndProvider>     </div>   ); }  export default App; 

2.2.2 useDrag函数

既然清亮了通盘专揽空间，接下来需要了解的即是从什么位置进行拖拽，该库提供了useDrag hook API，该元素不错让一个DOM元素终了拖拽后果。

参数

(1) spec：创建程序对象的程序对象或函数，其详备本色如下所示：

1)type

必须，是一个字符串或Symbol，独一drop和此值调换才不错进行甩掉;

2)item

必须，用于姿色被拖动的数据

3)previewOptions

可选的，一个肤浅对象，用于姿色拖动预览选项;

4)options

可选的，一个肤浅对象

5)end(item， monitor)

可选的，当拖拽住手，该函数被调用;

6)canDrag(monitor)

可选的，使用它指定面前是否允许拖动;

7)isDragging(monitor)

可选的，默许情况下，独一入手拖动操作的拖动源才被视为拖动;

8)collect

可选的，监听功能

复返值

复返值是一个数组，数组本色分辩为：

collected：一个对象，包含从collect函数网罗的属性，如若collect未界说函数， 久久精品无码一区二区小草则复返一个空对象;drag：拖动器的贯穿器功能，必须附加到DOM的可拖动部分;dragPreview:用于拖动预览的贯穿器功能，不错附加到DOM的预览部分;

与拖动部分红立贯穿

通过ref属性，将drag或dragPreview绑定到拖拽源上。

底下一齐来望望useDrag部分的使用

import {useDrag} from 'react-dnd';  const SourceBox = props => {     const {children} = props;      /**      * 复返的参数      * collected：一个对象，包含从collect函数网罗的属性，如若collect未界说函数，则复返一个空对象      * drag：拖动器的贯穿器功能，必须附加到DOM的可拖动部分      * dragPreview:用于拖动预览的贯穿器功能，不错附加到DOM的预览部分      */     const [collected， drag， dragPreview] = useDrag({         // 独一drop和此值调换才不错进行甩掉         type: 'box'，         // 姿色要拖动的数据         item: {             detail: '我是不错拖动的数据！！！'         }，         // 拖动住手的手end将会被调用         end: (item， monitor) => {             // getDropResult()获得开释后的按捺             console.log('monitor.getDropResult():'， monitor.getDropResult());             // source是否照旧drop在target             console.log('monitor.didDrop()'， monitor.didDrop());         }，00粉嫩高中生洗澡偷拍视频         // 指定面前是否允许拖动，默许允许         canDrag: monitor => {             return true;         }，         // 监听功能         collect: (monitor， props) => {             return {                 isDragging: monitor.isDragging()             };         }     });     return (         <div ref={drag}>             {children}         </div>     ); };  export default SourceBox; 

2.2.3 useDrop函数

为了将本色甩掉到野心位置，提供了useDrop函数，如下所示：

参数

(1) spec：创建程序对象的程序对象或函数，其详备本色如下所示：

1)accept

必须，一个字符串，此甩掉野心将仅关于指定类型的拖动源产生的形态作出反馈;

2)options

可选的，一个等闲的对象;

3)drop(item，monitor)

可选的，当兼容形态放在野心时被调用;

4)hover(item，monitor)

可选的，将形态悬停在组件时调用;

5)canDrop(item，monitor)

可选的，用它来指定甩掉野心是否收受该拖拽本色;

6)collect

可选的，监听功能

复返值

复返值是一个数组，数组本色分辩为：

collected：一个对象，包含从collect函数网罗的属性，如若collect未界说函数，则复返一个空对象;drop：一个用于甩掉野心的贯穿器函数，必须附加到DOM的甩掉部分;

与甩掉部分红立贯穿

通过ref属性，将drop与甩掉部分红立贯穿。

底下一齐来望望useDrop部分的使用

import {useDrop} from "react-dnd";  const TargetBox = () => {     const [collected， drop] = useDrop({         //  此甩掉野心将仅关于指定类型的拖动源产生的形态作出反馈         accept: 'box'，         // 当兼容形态放在野心时调用         drop: (item， monitor) => {             console.log('我照旧被放到野心！！！')         }，         // 监听功能         collect: monitor => {             return {                 // 是否重迭                 isOver: monitor.isOver()，                 // 是否不错甩掉                 canDrop: monitor.canDrop()，                 item: monitor.getItem()，                 didDrop: monitor.didDrop()             };         }     });      return (         <div ref={drop}>             <div className="targetBox">                 这是甩掉的区块             </div>         </div>     ); };  export default TargetBox; 

2.3 monitor详备本色

useDrag和useDrop上挂载了许多选项，这些选项中许多存在monitor对象，该对象上挂载了许多武艺，底下就简要抽象几个主要武艺，如下所示：

1. drag上的monitor上的武艺

2. drop上的monitor上的武艺

三、后果图

拖拽前

拖拽中

拖拽中拖拽的本色奴婢鼠标迁移

拖拽后

拖拽开释鼠标后，一些本色被打印出来，打印的按捺是先输出drop中的本色再输出end中的本色，是以咱们想做一些料理终末在SourceBox中进行料理，如若在drop中改造React有关的数据会报错。

四、学习感悟

这个库的尊府千人一面，在使用经过中遭受了一些坑，接下来与诸位老铁共享一下这些坑，扫视后续深陷其中。

 

end武艺的调用时机晚于drop的调用时机，是以独一在end中做开释后的数据料理才能保证系统的正确性，如若在drop中就更新state或React redux中数据，会激发极度; item数据是从Drag到Drop之间的桥梁，在drag中界说的item数据不错通过monitor.getItem()获得; drop回调的复返值是从Drop到Drag之间的桥梁，在end中不错通过monitor.getDropResult()其复返值; 一些挂载在monitor上的位置函数并不一定适用于总共的场景，需要引入DOM有关的位置操作。

本文转载自微信公众号「前端点线面」，不错通过以下二维码关怀。转载本文请干系前端点线面公众号。