因为在使用react-beautiful-dnd的时候没有找到一篇看完能快速上手的中文教程，因此在这简单介绍下这个拖拽组件是如何实现两个列表之间拖拽，其实就是对github的官方文档翻译一下，然后对Demo加点注释帮助理解，只能算是一篇学习笔记吧😂

0、Demo

Demo地址

1、安装

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save

2、基本用法

要实现两个列表之间的拖拽效果就要先了解三个主要的包裹组件

DragDropContext

拖拽上下文，这个组件用来包裹我们想要拖拽的列表，<Droppable />和<Draggable />必须放在这个组件里面。

用法

<DragDropContext
  onDragStart={this.onDragStart} // 拖拽开始
  onDragUpdate={this.onDragUpdate} // 拖拽变化
  onDragEnd={this.onDragEnd} // 拖拽结束
>
  <Droppable />
</DragDropContext>

其中OnDragEnd是拖拽结束事件，是必须要传的参数。

onDragEnd = result => {
  // result参数
  /*
  {
    draggableId: "item-1" 拖拽元素id
    source: {
        index: 1, // 拖拽元素在原列表的位置
        droppableId: "source" // 原列表Id
    }
    destination: {
        index: 1, // 拖拽元素在放置列表的位置
        droppableId: "destination" // 放置列表Id
    }
    ...
  }
  */
  // 根据result的source和destination来处理列表的数据，完成拖拽操作
}

Droppable

可放置组件，这个组件用来包裹能够被拖动元素放置的列表。

用法

<Droppable droppableId="droppable">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
      {...provided.droppableProps}
    >
      <Draggable />
    </div>
  )}
</Droppable>

组件内部只接收函数，其中有些必传的参数。

droppableId 必传参数，用来标识唯一的放置组件Id，在拖拽触发的事件中会用到。
provided 提供内部标签所需的props
- innerRef 获取ref，funtion组件是ref，class组件是innerRef
- droppableProps 必传参数，提供能够放置的列表的参数，在内部根节点展开即可
snapshot 快照
- isDraggingOver 是否有拖拽组件经过
- draggingOverWith 被拖拽经过的拖拽元素Id

Draggable

可拖拽组件，这个组件用来包裹需要被拖拽的元素。

用法

<Draggable draggableId={id} index={index}>
  {(provided, snapshot) => (
    <div
      {...provided.dragHandleProps}
      {...provided.draggableProps}
      ref={provided.innerRef}
    >
      ...  
    </div>
  )}
</Draggable>