React Beautiful Dnd 快速使用筆記

栏目: 服务器 · 发布时间: 5年前

内容简介：Reorder:在拖拉的時候，Droppable， Draggable 元件除了

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
```

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Ruby Programming Language

David Flanagan、Yukihiro Matsumoto / O'Reilly Media, Inc. / 2008 / USD 39.99

Ruby has gained some attention through the popular Ruby on Rails web development framework, but the language alone is worthy of more consideration -- a lot more. This book offers a definition explanat......一起来看看《The Ruby Programming Language》这本书的介绍吧!

码农工具

随机密码生成器

多种字符组合密码

UNIX 时间戳转换

HEX HSV 转换工具

HEX HSV 互换工具