61

React Beautiful Dnd 快速使用筆記

4 years ago

source link: https://www.tuicool.com/articles/fMfqQzq
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

react-beautiful-dnd 有 3 個主要元件：

DragDropContext - 建立一個可 DnD 的範圍。
- onDragStart
- onDragUpdate
- onDragEnd
Droppable - 建立可以被拖曳放入的區塊。
Draggalbe - 可被拖拉元件

安裝

$ npm i react-beautiful-dnd

於希望 DnD 的位置使用 DragDropContext 包起來，且 onDragEnd 必須設定：

import { DragDropContext } from 'react-beautiful-dnd';

<DragDropContext
  onDragEnd={() => {}}
>
  {/* Your target */}
</DragDropContext>

使用 Droppable 配置可被拖入的區塊
- Droppable 必須設定 droppableId
- Droppable 使用 render props pattern 意味著內部須使用一個 function。這個 function 使用 provided 將所需的參數代置 DOM
- provided 是一個物件
```
provided.droppableProps
ref
provided.placeholder
```

impoort { Droppable } from 'react-beautiful-dnd';

<Droppable droppableId="id">
  {
    provided => (
    	<List
        ref={provided.innerRef}
        {...provided.droppableProps}
      >
      	{provided.placeholder}
      </List>
    )
  }
</Droppable>

將可被拖移的元件使用 Draggable 包起來：
- draggableId 和 index 必須。
- 與 Droppable 一樣，children 為 render props pattern
- 內部項目 ref 須設定， provided.draggableProps 和 provided.dragHandleProps 須套用至元件

<Draggable
  draggableId={t.id}
  index={i}
 >
    {p => (
        <Item
        ref={p.innerRef}
        {...p.draggableProps}
        {...p.dragHandleProps}
        key={t.id}
      >
        {t.text}
        </Item>
    )}
  </Draggable>

onDragEnd 變更排序

// onDragEnd(result) result 資訊

const result = {
  draggableId: 1,
  type: 'TYPE',
  reson: 'DROP',
  source: {
    droppableId: 1,
    index: 0,
  },
  destination: {
    droppableId: 1,
    index: 1,
  }
}

Reorder:

onDragEnd={result => {
  const { source, destination, draggableId } = result;
  if (!destination) {
    return;
  }

  let arr = Array.from(this.state.todos);
  const [remove] = arr.splice(source.index, 1);
  arr.splice(destination.index, 0, remove);
  this.setState({
    todos: arr,
  });
}}

在拖拉的時候，Droppable， Draggable 元件除了 provided 之外還提供了 snapshot

下面是 snapshot 提供的資訊：

const draggableSnapshot = {
  isDragging: true,
  draggingOver: 'droppable-id'
}

const droppableSnapshot = {
  isDraggingOver: true,
  draggingOverWith: 'draggable-id'
}

回到 DragDropContext 除了 onDragEnd 之外還有 onDragStart 和 onDragUpdate 兩個 events 。

這兩個事件可以協助我們加入一些樣式：

// onDragStart
const start = {
  draggableId: 'draggalbe-id',
  type: 'TYPE',
  source: {
    droppableId: 'droppable-id',
    index: 0,
  }
}

// onDragUpdate
const update = {
  ...start,
  destination: {
    droppableId: 'droppable-id',
    index: 1,
  }
}

drag handle 是 Draggable 的一部分用來處理可拖拉的部分（可拖拉整個元件或局部）。
要停止拖拉可以設定 isDragDisabled
Droppable 可以限制可被拖入的元件：
```
type
isDropDisabled
```

Recommend

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK