大家好，我是王福鵬。

我是一名高級全棧工程師，也是 17.5k 開源項目 PMP 的作者?，F(xiàn)在我正在開發(fā)一個Notion風格的知識庫
HuashuiAI 包括 AI 寫作和協(xié)作，使用 React Nextjs 和 Supabase。

在這篇文章中，我將分享如何通過 React 和 dnd-kit 實現(xiàn)樹列表拖放排序。源碼鏈接在本文底部。

Dnd-kit 和可排序組件

Dnd-kit 是 React 生態(tài)中常見的拖放工具，默認支持排序。

    <DndContext 
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext 
        items={items}
        strategy={verticalListSortingStrategy}
      >
        {items.map(id => <SortableItem key={id}>



<p>But it can only support the one-level list. If we want to implement a multi-level nested list (or tree), we have to customize it.</p>

<h2>
  
  
  Define state date structure
</h2>

<p>Modern front-end frameworks such as React Vue are data-driven views, so defining data structures first and then considering UI rendering.</p>

<p>The most common data structure definition for multi-level nested lists (trees) is as follows, and virtual DOM vnode is also defined in this way.<br>
</p>

<pre class="brush:php;toolbar:false">const defaultItems = [
  { id: 'A', children: [] },
  {
    id: 'B',
    children: [
      { id: 'B1', children: [] },
      {
        id: 'B2',
        children: [
          { id: 'B2a', children: [] },
          { id: 'B2b', children: [] },
        ],
      },
    ],
  },
  { id: 'C', children: [] },
  {
    id: 'D',
    children: [
      { id: 'D1', children: [] },
      { id: 'D2', children: [] },
    ],
  },
  { id: 'E', children: [] },
]

多級嵌套SortableContext不可行

因為狀態(tài)數(shù)據(jù)結(jié)構(gòu)是嵌套的，所以我首先想到的就是嵌套并一起渲染UI結(jié)構(gòu)。

首先，嵌套 ;在 內(nèi)，這與單層列表使用的方法相同。

然后，繼續(xù)嵌套下級 在 中展示孩子們。

運行效果如下。問題是同一級別內(nèi)允許拖放排序，但跨級別排序是不可能的，因為它不是上下文 - 這是合理的

多級轉(zhuǎn)換為單級是可行的

由于嵌套不可行，因此需要將多級轉(zhuǎn)換為單級。

但是需要為每個item添加祖先Ids屬性，首先是為了顯示層次結(jié)構(gòu)的深度，其次是為了知道它有哪些父節(jié)點。

interface IItem {
  id: string
  ancestorIds?: string[]
  children?: IItem[]
}

function flatten(items: IItem[]): IItem[] {
  return items.reduce<IItem[]>((acc, item) => {
    acc.push(item)
    if (item.children) {
      const children = item.children.map((i) => ({
        ...i,
        ancestorIds: [...(item.ancestorIds || []), item.id], // add ancestorIds
      }))
      acc.push(...flatten(children))
    }
    return acc
  }, [])
}

轉(zhuǎn)換后的渲染效果如下，現(xiàn)在可以拖動排序了。不過要修改狀態(tài)排序后才會生效。

此外，我們還可以通過祖先ID的層級關(guān)系來判斷是否可以移動。父節(jié)點不能移動到子節(jié)點，否則循環(huán)會死。

例如上圖中，如果我們要將B2拖到B2a的位置，我們會發(fā)現(xiàn)B2a的祖先ID包含B2。這是不可能的，因為您無法將項目拖動到其自己的下屬項目。

修改狀態(tài)數(shù)據(jù)

為了方便操作，數(shù)據(jù)放置在Zustand全局存儲中。

Dnd-kit 將拖動的元素稱為 activeItem，將放置的目標位置稱為 overItem。所以修改狀態(tài)數(shù)據(jù)意味著將activeItem移動到overItem的位置。

如果是單關(guān)，Dnd-kit提供了一個方法arrayMove，可以直接修改。文檔鏈接 https://docs.dndkit.com/presets/sortable

但是在多級嵌套列表（樹）中，需要自己實現(xiàn)，有點麻煩。核心代碼在這里，大家可以下載源碼（文末）參考。

遇到問題

如下圖所示，將A拖到B下面時，A會整體移動到B的底部，而不是在B內(nèi)部。

要解決這個問題，需要判斷B之后是否還有B的子元素，如果有，則將overItem賦值給其子元素

然后將當前活動元素插入到items的第一個元素中。

結(jié)束

源代碼鏈接在這里 https://github.com/wangfupeng1988/react-dnd-sortable-demo

順便說一句，我正在尋找一份國際工作機會，如果你有機會，歡迎通過我的 Github 個人資料聯(lián)系我。

以上是React dnd-kit，實現(xiàn)樹列表拖放排序的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！