拖拽元件：React DnD 的使用

phoebeCodeSpace發表於2018-05-04
元件React

文章首發我的個人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，接收兩個引數 connect and monitor，必填。

下面約定 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 部分
  • 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 用於查詢當前的拖拽狀態，其對應例項內建了很多方法。

內建方法列表：

// 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()
複製程式碼

具體例子

先草草丟下官方例子和原始碼：

相關文章