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 包裹住组件,使其可以进行拖动。






































































































  

1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
原文地址:https://www.cnblogs.com/yuanjili666/p/12060836.html