https://scarletsky.github.io/2015/11/17/react-dnd-usage/
React DnD 是一组 React 高阶组件，可以用来帮你构建复杂的拖拽接口，同时解耦你的组件。在不同地方通过拖拽转移数据，而组件会改变它们的外观和应用的状态来响应拖拽事件。
基本用法
1.把应用的根组件包装在 DragDropContext 中
2.把可以拖拽的组件包装在 DragSource 中
设置 type
设置 spec，让组件可以响应拖拽事件
设置 collect，把拖拽过程中需要信息注入组件的 props
3.把可以接受拖拽的组件包装在 DropTarget 中
设置 type
设置 spec，让组件可以响应拖拽事件
设置 collect，把拖拽过程中需要信息注入组件的 props
一些概念
React DnD 中有一些特殊的概念，理解这些概念之后才能活用这个库！
*Backend 实现 DnD 的方式，默认是用 HTML5 DnD API，它不能在触屏环境下工作，而且在 IE 下可定制性比其他浏览器弱。你也可以用自己实现，具体请看官方文档。
*Items 拖拽数据的表现形式，用 Object 来表示。譬如，要拖拽一张卡片，那这张卡片的数据的表现形式可能是 { id: xxx, content: yyy }。
*Types 表示拖/放组件的兼容性，DragSource 和 DropTarget 必须指定 type。只有在 type 相同的情况下，DragSource 才能放到 DropTarget 中。
*Monitors 用来响应拖拽事件，可以用来更新组件的的状态。
*Connectors 底层接触 DOM 的东西，用来封装你的组件，让你的组件有拖拽的特性。一般在 collect 方法中指定，然后注入到组件的 props 中，最后 render 方法中包装你自己的组件。
*DragSource && DropTarget 把上面的概念都绑在一起的东西，也是真正跟你的组件打交道的东西。
网友评论