文章首發我的個人blog : 原文鏈接
學習 React DnD 的最初原因是閱讀《如何寫一個拖拽日歷組件》附的源碼時，看不懂拖拽組件 React DnD 的相關代碼，於是行動力極強地學習了React DnD這個組件。
本文會通過 在根組件（Contaier.jsx）展示將垃圾（Box.jsx）扔進垃圾桶（Dustbin.jsx）的例子，解釋如何使用React DnD最基本的拖拽用法。
預覽 垃圾桶效果
查看 垃圾桶源碼
核心API
想要靈活使用，就先知道幾個核心API
- DragSource 用於包裝你需要拖動的組件，使組件能夠被拖拽（make it draggable）
- DropTarget 用於包裝接收拖拽元素的組件，使組件能夠放置（dropped on it）
- DragDropContex 用於包裝拖拽根組件，
DragSource和DropTarget都需要包裹在DragDropContex內 - DragDropContextProvider 與
DragDropContex類似，用DragDropContextProvider元素包裹拖拽根組件。
大致理解這幾個API的概念后，垃圾（Box.jsx）扔進垃圾桶（Dustbin.jsx）的代碼將會是：
// Box.jsx import { DragSource } from 'react-dnd'; @DragSource(type, spec, collect) export default class Box { /* ... */ } // Dustbin.jsx import { DropTarget } from 'react-dnd'; @DropTarget(types, spec, collect) export default class Contaier { /* ... */ } // Contaier.jsx (DragDropContex) import { DragDropContext } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import Box from './Box'; import Dustbin from './Dustbin'; @DragDropContext(HTML5Backend) export default class Contaier extends Component { render() { return ( <div> <Dustbin/> <Box/> </div> ); } } // 也可以寫成 Contaier.jsx (DragDropContextProvider) import { DragDropContextProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import Box from './Box'; import Dustbin from './Dustbin'; export default class DustbinContaier extends Component { render() { return ( <DragDropContextProvider backend = { HTML5Backend }> <div> <Dustbin/> <Box/> </div> </DragDropContextProvider> ); } }API參數介紹
上面的代碼
@DragSource(type, spec, collect)
@DropTarget(types, spec, collect)可以看到 DragSource, DropTarget 分別有三個參數：
- type: 拖拽類型，必填
- spec: 拖拽事件的方法對象，必填。
- collect: 把拖拽過程中需要信息注入組件的 props，接收兩個參數
connectandmonitor，必填。
下面約定 source組件 為DragSource包裝的組件(本示例為Box.jsx)， target組件 為DropTarget包裝的組件(本示例為Dustbin.jsx)。
type
當 source組件的type 和 target組件的type 一致時，target組件可以接受source組件。
type的類型可以是 string，symbol，也可以是用一個函數來返回該組件的其他 props。
翻譯為代碼：
// ItemTypes.js 定義類型 export default { BOX: 'box', } // Box.jsx import ItemTypes from './ItemTypes' @DragSource(ItemTypes.BOX, spec, collect) // Dustbin.jsx import ItemTypes from './ItemTypes' @DropTarget(ItemTypes.BOX, spec, collect)spec
spec定義特定方法的對象，如 source組件的spec 可以定義 拖動 相關的事件，target組件的spec 可以定義 放置 相關的事件，具體列表：
DragSource specObj
beginDrag(props, monitor, component): 拖動開始時觸發的事件，必須。返回跟props相關的對象。endDrag(props, monitor, component): 拖動結束時觸發的事件，可選。canDrag(props, monitor): 當前是否可以拖拽的事件，可選。isDragging(props, monitor): 拖拽時觸發的事件，可選。
翻譯為代碼：
// Box.jsx const sourceSpec = { beginDrag(props, monitor, component){ // 返回需要注入的屬性 return { id: props.id } }, endDrag(props, monitor, component){ // .. }, canDrag(props, monitor){ // .. }, isDragging(props, monitor){ // .. } } @DragSource(ItemTypes.BOX, sourceSpec, collect)DropTarget specObj
drop(props, monitor, component)組件放下時觸發的事件，可選。hover(props, monitor, component)組件在DropTarget上方時響應的事件，可選。canDrop(props, monitor)組件可以被放置時觸發的事件，可選。
翻譯為代碼：
// Dustbin.jsx const targetSpec = { drop(props, monitor, component){ // .. }, hover(props, monitor, component){ // .. }, canDrop(props, monitor){ // .. } } @DropTarget(ItemTypes.BOX, targetSpec, collect)specObj 對象方法相關參數
- props： 組件當前的props
-
monitor：查詢當前的拖拽狀態，比如當前拖拽的item和它的type，當前拖拽的offsets，當前是否dropped。具體獲取方法，參看collect 參數 monitor 部分
source組件的 monitor 參數是 DragSourceMonitor 的實例target組件的 monitor 參數是 DropTargetMonitor 的實例
- component：當前組件實例
collect
collect 是一個函數，默認有兩個參數：connect 和 monitor。collect函數將返回一個對象，這個對象會注入到組件的 props 中，也就是說，我們可以通過 this.props 獲取collect返回的所有屬性。
參數 connect
source組件collect 中 connect是 DragSourceConnector的實例，它內置了兩個方法：dragSource()和dragPreview()。dragSource()返回一個方法，將source組件傳入這個方法，可以將 source DOM 和 React DnD backend 連接起來；dragPreview()返回一個方法，你可以傳入節點，作為拖拽預覽時的角色。target組件collect 中 connect是 DropTargetConnector的實例，內置的方法dropTarget()對應dragSource()，返回可以將 drop target 和 React DnD backend 連接起來的方法。
翻譯為代碼：
// Box.jsx @DragSource(ItemTypes.BOX, sourceSpec,(connect)=>({ connectDragSource: connect.dragSource(), connectDragPreview: connect.dragPreview(), })) export default class Box { render() { const { connectDragSource } = this.props return connectDragSource( <div> { /* ... */ } </div>, ) } } // Dustbin.jsx @DropTarget(ItemTypes.BOX, targetSpec, (connect)=>{ connectDropTarget: connect.dropTarget(), }) export default class Dustbin { render() { const { connectDropTarget } = this.props return connectDropTarget( <div> { /* ... */ } </div>, ) } }參數 monitor
monitor 用於查詢當前的拖拽狀態，其對應實例內置了很多方法。
source組件collect 中 monitor是 DragSourceMonitor的實例。target組件collect 中 monitor是 DropTargetMonitor的實例。
內置方法列表：
// DragSourceMonitor monitor.canDrag() // 是否能被拖拽 monitor.isDragging() // 是否正在拖拽 monitor.getItemType() // 拖拽組件type monitor.getItem() // 當前拖拽的item monitor.getDropResult() // 查詢drop結果 monitor.didDrop() // source是否已經drop在target monitor.getInitialClientOffset() // 拖拽組件初始拖拽時offset monitor.getInitialSourceClientOffset() monitor.getClientOffset() // 拖拽組件當前offset monitor.getDifferenceFromInitialOffset() // 當前拖拽offset和初始拖拽offset的差別 monitor.getSourceClientOffset() // DropTargetMonitor monitor.canDrop() // 是否可被放置 monitor.isOver(options) // source是否在target上方 monitor.getItemType() // 拖拽組件type monitor.getItem() // 當前拖拽的item monitor.getDropResult() // 查詢drop結果 monitor.didDrop() // source是否已經drop在target monitor.getInitialClientOffset() // 拖拽組件初始拖拽時offset monitor.getInitialSourceClientOffset() monitor.getClientOffset() // 拖拽組件當前offset monitor.getDifferenceFromInitialOffset() // 當前拖拽offset和初始拖拽offset的差別 monitor.getSourceClientOffset()具體例子
先草草丟下官方例子和源碼：
轉自：https://segmentfault.com/a/1190000014723549