大家好，我是王福鵬。

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

在這篇文章中，我將分享如何透過 React 和 dnd-kit 實現(xiàn)樹列表拖放排序。原始碼連結(jié)在本文底部。

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)資料結(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ù)

為了方便操作，資料放置在Zustand全域儲存。

Dnd-kit 將拖曳的元素稱為 activeItem，而將放置的目標位置稱為 overItem。所以修改狀態(tài)資料意味著將activeItem移到overItem的位置。

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

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

遇到問題

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

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

然後將目前活動元素插入items的第一個元素中。

結(jié)束

原始碼連結(jié)在這裡 https://github.com/wangfupeng1988/react-dnd-sortable-demo

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

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