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

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

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

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)データ構造はネストされているため、最初に思いつくのは、UI 構造をネストして一緒にレンダリングすることです。

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

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

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

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

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

ただし、最初に階層の深さを表示し、次にそのアイテムにどのような親ノードがあるかを知るために、各項目に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 の階層関係を通じて移動できるかどうかを判斷することもできます。親ノードを子ノードに移動することはできません。移動しないと、ループが停止します。

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

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

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

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

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

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

問題が発生しました

下の図に示すように、A を B の下にドラッグすると、A は B 內ではなく、全體として B の下に移動します。

この問題を解決するには、B の後に B の子要素があるかどうかを判斷する必要があります。存在する場合は、その子要素に overItem を割り當てます

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

終わり

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

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

以上がReact dnd-kit、ソート可能なツリーリストのドラッグアンドドロップを実裝の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。