Bertindak balas dnd-kit, laksanakan seret dan lepas senarai pokok boleh disusun

Hai, nama saya Fupeng Wang.

Saya seorang jurutera tindanan penuh kanan dan pengarang projek sumber terbuka 17.5k, PMP. Kini saya sedang membangunkan pangkalan pengetahuan gaya Notion
HuashuiAI termasuk penulisan dan kerjasama AI, menggunakan React Nextjs dan Supabase.

Dalam artikel ini, saya akan berkongsi cara melaksanakan seret dan lepas senarai pokok boleh disusun mengikut React dan dnd-kit. Pautan kod sumber ada di bahagian bawah artikel ini.

Dnd-kit dan komponen Boleh Isih

Dnd-kit ialah alat drag-drop biasa dalam ekosistem React, dan ia menyokong boleh diisih secara lalai.

    <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 bersarang berbilang peringkat tidak boleh dilaksanakan

Oleh kerana struktur data keadaan bersarang, perkara pertama yang terlintas di fikiran saya ialah untuk menyarang dan menjadikan struktur UI bersama-sama.

Pertama, sarang dalam , iaitu kaedah yang sama digunakan untuk senarai satu lapisan.

Kemudian, teruskan sarang bawahan dalam untuk memaparkan kanak-kanak.

Kesan larian adalah seperti berikut. Masalahnya ialah pengisihan seret dan lepas dibenarkan dalam tahap yang sama, tetapi pengisihan peringkat silang tidak boleh dilakukan kerana ia bukan konteks - yang munasabah

Penukaran berbilang peringkat kepada satu peringkat boleh dilaksanakan

Memandangkan sarang tidak boleh dilaksanakan, anda perlu menukar berbilang peringkat kepada satu tahap.

Tetapi adalah perlu untuk menambah atribut ancestorsIds untuk setiap item, pertama sekali untuk memaparkan kedalaman hierarki dan kedua untuk mengetahui nod induk yang ada padanya.

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

Kesan pemaparan selepas penukaran adalah seperti berikut, dan kini anda boleh menyeret dan mengisihnya. Walau bagaimanapun, ia tidak akan berkuat kuasa sehingga pengisihan keadaan diubah suai.

Selain itu, kita juga boleh menentukan sama ada ia boleh digerakkan melalui hubungan hierarki ID nenek moyang. Nod induk tidak boleh dialihkan ke nod anaknya, jika tidak gelung akan mati.

Sebagai contoh, dalam rajah di atas, jika kita ingin menyeret B2 ke kedudukan B2a, kita akan mendapati bahawa ID moyang B2a mengandungi B2. Ini tidak mungkin kerana anda tidak boleh menyeret item ke bawahannya sendiri.

Ubah suai data keadaan

Untuk kemudahan pengendalian, data diletakkan di stor global Zustand.

Dnd-kit merujuk kepada elemen yang diseret sebagai ActiveItem dan lokasi sasaran yang diletakkan sebagai overItem. Jadi mengubah suai data keadaan bermakna mengalihkan activeItem ke kedudukan overItem.

Jika ia adalah satu tahap, Dnd-kit menyediakan kaedah arrayMove yang boleh diubah suai secara langsung. Pautan dokumen https://docs.dndkit.com/presets/sortable

Tetapi dalam senarai bersarang berbilang peringkat (pokok), anda perlu melaksanakannya sendiri, yang agak menyusahkan. Kod teras ada di sini dan anda boleh memuat turun kod sumber (pada penghujung artikel) untuk rujukan.

Menghadapi masalah

Seperti yang ditunjukkan dalam rajah di bawah, apabila menyeret A ke bawah B, A akan bergerak ke bahagian bawah B secara keseluruhan, bukan di dalam B.

Untuk menyelesaikan masalah ini, adalah perlu untuk menentukan sama ada terdapat sebarang unsur anak B selepas B. Jika ya, tetapkan overItem kepada elemen anaknya

Kemudian masukkan elemen aktif semasa ke dalam elemen pertama item.

penghujungnya

Pautan kod sumber ada di sini https://github.com/wangfupeng1988/react-dnd-sortable-demo

Dengan cara ini, saya sedang mencari peluang pekerjaan antarabangsa, jika anda mempunyai peluang, dialu-alukan untuk menghubungkan saya pada profil Github saya.

Atas ialah kandungan terperinci Bertindak balas dnd-kit, laksanakan seret dan lepas senarai pokok boleh disusun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!