1、下載所需要的依賴

yarn add react-beautiful-dnd

2、頁面使用

import { Image, List } from '這里使用公司組件庫，可使用ant desgin'
import React, { useState } from 'react'
import { DragDropContext, Draggable, Droppable, DropResult, } from 'react-beautiful-dnd'
import { users, users1 } from './users'  // mork數(shù)據(jù)
export default () => {
  const [list, setList] = useState(users)
  const [list1, setList1] = useState(users1)
  // 處理同列表之間的數(shù)據(jù)
  const reorder = (list: any, startIndex: number, endIndex: number) => {
    const result = Array.from(list)
    const [removed] = result.splice(startIndex, 1)
    result.splice(endIndex, 0, removed)
    return result
  }
  // 處理不同列表之間的數(shù)據(jù) removeList需要?jiǎng)h除的數(shù)組，newList為添加的數(shù)組，result拖拽的元素信息，identification進(jìn)行賦值的標(biāo)識判斷
  const onResultChange = (removeList: any, newList: any, result: any, identification?: any) => {
    removeList.forEach((item: any, index: any) => {
      if (item.id === result.draggableId) {
        newList.splice(result.destination.index, 0, item)
      }
    })
    removeList.splice(result.source.index, 1)
  // 根據(jù)identification標(biāo)識進(jìn)行列表賦值，渲染視圖。如出現(xiàn)更多列表自行處理需求，可根據(jù)標(biāo)識
    setList(identification ? [...newList] : [...removeList])
    setList1(identification ? [...removeList] : [...newList])
  }
  // 拖拽結(jié)束后的回調(diào)
  const onDragEnd = (result: any) => {
    if (!result.destination) return // 判斷是否有結(jié)束參數(shù)
    if (result.destination.droppableId !== result.source.droppableId) { // 結(jié)束的id不等于開始的id，說明是兩個(gè)列表直接發(fā)生了變化 也可以添加多個(gè)列表，droppableId不一致，在以下進(jìn)行判斷
    // 以下只是兩個(gè)列表的交互，如果是多個(gè)，要增加更多判斷，標(biāo)識也需自行替換處理需求,最好將開始和結(jié)束的droppableId傳遞
      if (result.destination.droppableId === "droppable1") { //  第一個(gè)列表拖拽到了第二個(gè)列表
        onResultChange(list, list1, result, false)
      } else {  //  第二個(gè)列表拖拽到了第一個(gè)列表
        onResultChange(list1, list, result, true)
      }
    } else { //  id位置相等，說明是同列表直接的數(shù)據(jù)發(fā)生了變化
      if (result.source.droppableId === "droppable") {
        const newList: any = reorder(list, result.source.index, result.destination.index)
        setList([...newList])
      } else {
        const newList: any = reorder(list1, result.source.index, result.destination.index)
        setList1([...newList])
      }
    }
  }
  return (
    <List>
      <div>第一個(gè)列表</div>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId='droppable'>  // 每個(gè)容器的ID不能一致
          {droppableProvided => (
            <div ref={droppableProvided.innerRef}>
              {list.map((item: any, index: number) => ( // 循環(huán)的數(shù)組
                <Draggable key={item.id} draggableId={item.id} index={index}> //  key draggableId是唯一性
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        ...provided.draggableProps.style,
                        opacity: snapshot.isDragging ? 0.8 : 1,
                      }}
                    >
                      <List.Item
                        key={item.name}
                        prefix={
                          <Image
                            src={item.avatar}
                            style={{ borderRadius: 24 }}
                            fit='cover'
                            width={48}
                            height={48}
                          />
                        }
                      >
                        {item.name}
                      </List.Item>
                    </div>
                  )}
                </Draggable>
              ))}
              {droppableProvided.placeholder}
            </div>
          )}
        </Droppable>
        <div>第二個(gè)列表</div>
        <Droppable droppableId='droppable1'>
          {droppableProvided1 => (
            <div ref={droppableProvided1.innerRef}>
              {list1.map((item: any, index: number) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        ...provided.draggableProps.style,
                        opacity: snapshot.isDragging ? 0.8 : 1,
                      }}
                    >
                      <List.Item
                        key={item.name}
                        prefix={
                          <Image
                            src={item.avatar}
                            style={{ borderRadius: 24 }}
                            fit='cover'
                            width={48}
                            height={48}
                          />
                        }
                      >
                        {item.name}
                      </List.Item>
                    </div>
                  )}
                </Draggable>
              ))}
              {droppableProvided1.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </List>
  )
}

3.mork數(shù)據(jù)

 export const users1 = [
    {
      id: '10',
      avatar:
        'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '1',
    },
    {
      id: '20',
      avatar:
        'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
      name: '2',
    },
    {
      id: '30',
      avatar:
        'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '3',
    },
    {
      id: '40',
      avatar:
        'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '4',
    },
  ]

4、最后肯定是需要實(shí)時(shí)的保存數(shù)據(jù)，以上只是構(gòu)寫的demo，沒有構(gòu)寫相關(guān)邏輯，可調(diào)用后端接口在多列表數(shù)組傳遞即可。