React dnd-kit、ソート可能なツリーリストのドラッグアンドドロップを実装-jsチュートリアル-php.cn

React dnd-kit、ソート可能なツリーリストのドラッグアンドドロップを実装

Susan Sarandon

リリース： 2024-12-10 20:09:10

オリジナル

600 人が閲覧しました

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

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

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

React dnd-kit, implement tree-list drag and drop sortable

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 は実現できません

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

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

React dnd-kit, implement tree-list drag and drop sortable

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

React dnd-kit, implement tree-list drag and drop sortable

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

React dnd-kit, implement tree-list drag and drop sortable

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

ネストは実現できないため、複数のレベルを単一のレベルに変換する必要があります。

ただし、最初に階層の深さを表示し、次にそのアイテムにどのような親ノードがあるかを知るために、各項目に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
  }, [])
}

ログイン後にコピー

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

React dnd-kit, implement tree-list drag and drop sortable