react-dnd 介绍及使用，react-dnd实现拖拽效果，

 

 

 

 

 

react-dnd  是什么？
干嘛用？
如何使用？
在什么情况下使用？

一、概念
React DnD 是一组 React 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式，不需要开发者自己判断拖动状态，只需要在传入的 spec 对象中各个状态属性中做对应处理即可。刚刚接触可能难以理解，真正熟悉用法之后会感觉很方便。

几个概念

• DragSource 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）
• DropTarget 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）
• DragDropContext 用于包装拖拽根组件，DragSource 和 DropTarget 都需要包裹在DragDropContext内

参数说明

 DragSource(type, spec, collect)
 DropTarget (type, spec, collect)

 

DragSource和DropTarget各有三个参数

type: 拖拽类型，必填。当 source组件的type 和 target组件的type 一致时，target组件可以接受source组件。
spec: 拖拽事件的方法对象，必填。
collect: 把拖拽过程中需要信息注入组件的 props，接收两个参数 connect and monitor，必填。

 

 

二、DragSource：使组件能够被拖拽

使用 DragSource 包裹住组件，使其可以进行拖动。