近期，知名 React 拖拽庫(kù) react-beautiful-dnd 宣布了項(xiàng)目棄用的決定，未來(lái)將不再維護(hù)。這一決定源于其存在的缺陷與局限性，促使作者轉(zhuǎn)向開(kāi)發(fā)一個(gè)更加現(xiàn)代化的拖拽解決方案——Pragmatic drag and drop（下面會(huì)介紹），其旨在提供更佳的性能、靈活性和可訪問(wèn)性。

作為 React 生態(tài)中不可或缺的工具庫(kù)，react-beautiful-dnd 曾以其卓越的拖放體驗(yàn)贏得了廣泛贊譽(yù)，其 npm 周下載量高達(dá) 163 萬(wàn)次。

對(duì)于仍希望繼續(xù)使用 react-beautiful-dnd 的開(kāi)發(fā)者，以下是一些可行的選擇：

• fork 與修補(bǔ)：可以fork react-beautiful-dnd 項(xiàng)目以繼續(xù)使用它，或者利用patch-package進(jìn)行定制修補(bǔ)。
• 遷移至 fork 版本：考慮遷移到react-beautiful-dnd的某個(gè)活躍 fork 版本，以繼續(xù)享受其功能。
• 探索其他解決方案：考慮遷移到如 dnd-kit 等其他類(lèi)似的拖拽解決方案。
• 轉(zhuǎn)向 Pragmatic drag and drop：為了獲得更快速、更現(xiàn)代化的體驗(yàn)，可以手動(dòng)遷移到Pragmatic drag and drop，或者利用官方提供的遷移包進(jìn)行自動(dòng)遷移。

下面來(lái)看看前端還有哪些好用的拖拽庫(kù)。

Vue

VueDraggablePlus

VueDraggablePlus 是一個(gè)支持 Vue2 和 Vue3 的拖拽庫(kù)，尤雨溪都在推薦：

Sortablejs 是一個(gè)非常流行的拖拽庫(kù)，不過(guò)這個(gè)庫(kù)的 Vue 3 版本已經(jīng)三年沒(méi)更新了，可以說(shuō)是已經(jīng)跟 Vue 3 嚴(yán)重脫節(jié)，所以就誕生了 VueDraggablePlus，這個(gè)組件就是基于 Sortablejs 實(shí)現(xiàn)的。

Github：https://github.com/Alfred-Skyblue/vue-draggable-plus。

React

dnd-kit

dnd-kit 是一個(gè)專(zhuān)為 React 設(shè)計(jì)的現(xiàn)代化、輕量級(jí)、高性能且易于訪問(wèn)的拖拽解決方案，其 npm 周下載量 200 萬(wàn)左右。

import React, {useState} from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';

function Example() {
  const [parent, setParent] = useState(null);
  const draggable = (
    <Draggable id="draggable">
      Go ahead, drag me.
    </Draggable>
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {!parent ? draggable : null}
      <Droppable id="droppable">
        {parent === "droppable" ? draggable : 'Drop here'}
      </Droppable>
    </DndContext>
  );

  function handleDragEnd({over}) {
    setParent(over ? over.id : null);
  }
}

Github：https://github.com/clauderic/dnd-kit。

react-dnd

react-dnd 是一個(gè)由 React 和 Redux 的核心作者 Dan Abramov 開(kāi)發(fā)的強(qiáng)大的庫(kù)，旨在幫助開(kāi)發(fā)者輕松構(gòu)建復(fù)雜的拖拽界面，其 npm 周下載量 200 萬(wàn)左右。

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

Github：https://github.com/react-dnd/react-dnd。

通用

pragmatic-drag-and-drop

pragmatic-drag-and-drop 是 react-beautiful-dnd 作者開(kāi)發(fā)的新拖拽庫(kù)。它是一個(gè)較底層的拖拽工具鏈，它使得開(kāi)發(fā)者能夠安全且成功地利用瀏覽器內(nèi)置的拖拽功能。這個(gè)工具鏈不依賴(lài)于特定的視圖層，因此可以與 React、Svelte、Vue、Angular 等多種前端框架無(wú)縫集成。一些大型產(chǎn)品，如Jira、Confluence，都在使用 Pragmatic Drag and Drop 來(lái)實(shí)現(xiàn)拖拽功能。

Github：https://github.com/atlassian/pragmatic-drag-and-drop。

Swapy

Swapy 是一個(gè)全新的拖拽庫(kù)，僅發(fā)布三個(gè)月，就在 GitHub 上收獲了 6k+ Stars，并且還在快速增長(zhǎng)中。Swapy 與框架無(wú)關(guān)，只需幾行代碼就可以將任何布局轉(zhuǎn)換為可拖動(dòng)交換的布局。

Github：https://github.com/TahaSh/swapy。