こんにちは、王富鵬です。

私はシニア フルスタック エンジニアで、17.5k のオープンソース プロジェクト PMP の作成者です?，F(xiàn)在、Notion スタイルのナレッジ ベースを開(kāi)発しています
React Nextjs と Supabase を使用した、AI の作成とコラボレーションを含む HuashuiAI。

この記事では、React と dnd-kit でソート可能なツリーリストのドラッグ アンド ドロップを?qū)g裝する方法を共有します。ソース コードのリンクはこの記事の下部にあります。

DND キットとソート可能なコンポーネント

Dnd-kit は React エコシステムの一般的なドラッグ ドロップ ツールであり、デフォルトで並べ替え可能をサポートしています。

    <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 は実現(xiàn)できません

狀態(tài)データ構(gòu)造はネストされているため、最初に思いつくのは、UI 構(gòu)造をネストして一緒にレンダリングすることです。

まず、 をネストします。 內(nèi)、これは 1 層リストに使用されるのと同じ方法です。

次に、下位の のネストを続けます。 內(nèi)子を表示します。

ランニング効果は以下の通りです。問(wèn)題は、同じレベル內(nèi)ではドラッグ アンド ドロップによる並べ替えが許可されているが、レベル間の並べ替えはコンテキストではないため不可能であることです。これは合理的です

マルチレベルからシングルレベルへの変換が可能

ネストは実現(xiàn)できないため、複數(shù)のレベルを単一のレベルに変換する必要があります。

ただし、最初に階層の深さを表示し、次にそのアイテムにどのような親ノードがあるかを知るために、各項(xiàng)目にancestorIds 屬性を追加する必要があります。

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
  }, [])
}

変換後のレンダリング効果は次のようになり、ドラッグして並べ替えることができるようになりました。ただし、狀態(tài)の並べ替えが変更されるまでは有効になりません。

さらに、ancestorID の階層関係を通じて移動(dòng)できるかどうかを判斷することもできます。親ノードを子ノードに移動(dòng)することはできません。移動(dòng)しないと、ループが停止します。

たとえば、上の図で、B2 を B2a の位置にドラッグすると、B2a の先祖 ID に B2 が含まれていることがわかります。項(xiàng)目をその下位にドラッグできないため、これは不可能です。

狀態(tài)データを変更する

操作を容易にするために、データは Zustand グローバル ストアに配置されます。

Dnd-kit は、ドラッグされた要素を activeItem として參照し、配置されたターゲットの位置を overItem として參照します。したがって、狀態(tài)データを変更するということは、activeItem を overItem の位置に移動(dòng)することを意味します。

単一レベルの場(chǎng)合、Dnd-kit は直接変更できるメソッド arrayMove を提供します。ドキュメントリンク https://docs.dndkit.com/presets/sortable

しかし、複數(shù)レベルのネストされたリスト (ツリー) では、自分で実裝する必要があり、少し面倒です。コア コードはここにあります。參照用にソース コード (記事の最後にあります) をダウンロードできます。

問(wèn)題が発生しました

下の図に示すように、A を B の下にドラッグすると、A は B 內(nèi)ではなく、全體として B の下に移動(dòng)します。

この問(wèn)題を解決するには、B の後に B の子要素があるかどうかを判斷する必要があります。存在する場(chǎng)合は、その子要素に overItem を割り當(dāng)てます

次に、現(xiàn)在のアクティブな要素を項(xiàng)目の最初の要素に挿入します。

終わり

ソースコードのリンクはこちら https://github.com/wangfupeng1988/react-dnd-sortable-demo

ところで、私は國(guó)際的な仕事の機(jī)會(huì)を探しています。機(jī)會(huì)があれば、私の Github プロフィールに連絡(luò)してください。

以上がReact dnd-kit、ソート可能なツリーリストのドラッグアンドドロップを?qū)g裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。