使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑

更新時(shí)間：2021年05月24日 10:33:17 作者：雨時(shí)_Kaylee

相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場(chǎng)景，本文主要介紹了使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑，感興趣的可以了解一下

為什么選用react-beautiful-dnd

相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場(chǎng)景，支持移動(dòng)端，且較為容易上手。

基本使用方法

基本概念

DragDropContext：構(gòu)建一個(gè)可以拖拽的范圍
onDragStart：拖拽開(kāi)始回調(diào)
onDragUpdate：拖拽中的回調(diào)
onDragEnd：拖拽結(jié)束時(shí)的回調(diào)
Droppable - 可以放置拖拽塊的區(qū)域
Draggalbe - 可被拖拽的元素

使用方法

把你想能夠拖放的代碼放到DragDropContext中

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

class App extends React.Component {
  onDragStart = () => {
    /*...*/
  };
  onDragUpdate = () => {
    /*...*/
  }
  onDragEnd = () => {
    // the only one that is required
  };

  render() {
    return (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <div>Hello world</div>
      </DragDropContext>
    );
  }
}

確定可放置區(qū)域Dropppable

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

class App extends React.Component {
  // ...
  render() {
    return (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <Droppable droppableId="droppable-1">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
              {...provided.droppableProps}
            >
              <h2>I am a droppable!</h2>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

必需的DroppableId（字符串），用于唯一標(biāo)識(shí)應(yīng)用程序的droppable。不要更改此ID特別是在拖動(dòng)時(shí)
provided.placeholder: 占位符（這個(gè)占位符是默認(rèn)的，一般不咋符合需求）
snapshot：當(dāng)前拖動(dòng)狀態(tài)，可以用來(lái)在被拖動(dòng)時(shí)改變Droppable的外觀

在Dropppable區(qū)域使用Draggable包裹拖拽元素

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

class App extends React.Component {
  // ...

  render() {
    return (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <Droppable droppableId="droppable-1">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
              {...provided.droppableProps}
            >
              <Draggable draggableId="draggable-1" index={0}>
                {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <h4>My draggable</h4>
                    </div>
                )}
              </Draggable>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

Draggable必須始終包含在Droppable中
DraggablebId（字符串）：必須存在唯一ID，和index（如果為遍歷 key也需要）不要更改此ID，特別是在拖動(dòng)時(shí)

拖拽結(jié)束時(shí)，改變?cè)磾?shù)據(jù)

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

  // 修改源和目標(biāo)數(shù)組，將拖拽元素從源數(shù)組中刪除，再插入到目標(biāo)數(shù)組中
  this.setState({
    xxx: xxx,
  });
}

使用過(guò)程中遇到的問(wèn)題

向拖拽的目標(biāo)區(qū)域增加自定義占位符（custom placeholder）

react-beautiful-dnd在拖拽到目標(biāo)區(qū)域時(shí)，目標(biāo)區(qū)域的元素之間會(huì)給當(dāng)前拖拽元會(huì)自動(dòng)空出一段space，這段space的距離是目標(biāo)區(qū)域Draggable元素的大?。ǖ话ㄔ氐膍argin邊距，這也是一個(gè)坑，下文會(huì)說(shuō)到解決方法）。

因此可以在這段距離中采用絕對(duì)定位，增加自定義占位符。具體做法：計(jì)算出當(dāng)前自定義占位符元素的left & top距離，在dragUpdate事件中更新這兩個(gè)距離，可參考beatiful-dnd-custom-placeholder-demo

拖拽時(shí)，修改拖拽元素的transform屬性，導(dǎo)致拖拽會(huì)卡死在某處，拖拽元素放置位置錯(cuò)誤

在官方文檔中，有這樣一段說(shuō)明, 大概是說(shuō)draggable元素采用了position: fixed定位，但會(huì)受到transform會(huì)影響。

#### Warning: `position: fixed`

`react-beautiful-dnd` uses `position: fixed` to position the dragging element. This is quite robust and allows for you to have `position: relative | absolute | fixed` parents. However, unfortunately `position:fixed` is [impacted by `transform`](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/) (such as `transform: rotate(10deg);`). This means that if you have a `transform: *` on one of the parents of a `<Draggable />` then the positioning logic will be incorrect while dragging. Lame! For most consumers this will not be an issue.

To get around this you can [reparent your <Draggable />](/docs/guides/reparenting.md). We do not enable this functionality by default as it has performance problems.

提供了如下解決方法：使用createPortal給拖動(dòng)元素掛在空的父元素上，可參考issue: transform on parent messes up dragging positioning

但是這個(gè)方法并不能解決我的問(wèn)題，因?yàn)檫€有自定義placeholder的需求。在拖拽時(shí)還需要計(jì)算placeholder的left的距離，也就需要獲取當(dāng)前拖拽元素的parentNode下的子元素，使用createPortal則獲取不到拖拽元素的原parentNode，因此放棄createPortal的方案。采用改變width和height達(dá)到transform：scale的效果。

移動(dòng)端拖拽元素需要長(zhǎng)按該元素（long-press）

官方文檔中給出的說(shuō)明是，在移動(dòng)端場(chǎng)景下，在draggable元素上的手指操作，無(wú)法確定是tap，force press，或者scroll，所以需要長(zhǎng)按該元素才能確定是拖拽。

Starting a drag: long press
A user can start a drag by holding their finger 👇 on an element for a small period of time 🕑 (long press)

拖拽某個(gè)元素懸停在目標(biāo)位置時(shí)，空出的插入space距離不準(zhǔn)確的問(wèn)題
這個(gè)就是上文中提到的，Draggable之間留的placeholder的空余距離是一個(gè)Draggable的距離，但不包括Dragglable的margin邊距，可參考這個(gè)issue。

最后采用padding來(lái)控制Draggable之間的距離，這樣在拖拽時(shí)空出的space就包括了padding。