?????. ? ??? ??????.

?? ?? ??? ?????? 17.5k ?? ?? ????? PMP? ?????. ??? Notion ???? ?????? ?? ????
React Nextjs ? Supabase? ???? AI ?? ? ??? ???? HuashuiAI.

? ???? React? dnd-kit?? ?? ??? ?? ??? ??? ? ??? ???? ??? ???????. ???? ??? ? ??? ????.

Dnd-kit ? Sortable ?? ??

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 ??? ?? ???? ????? ????.

?? ??? , ?? ?? ??? ??? ???? ?? ??? ?????.

?? ?? ?? ???? ???? ??.

?? ??? ??? ????. ??? ??? ?? ???? ??? ? ?? ??? ?????, ????? ??? ??? ?? ?? ??? ?????? ????. ?? ??????

?? ???? ?? ?? ??? ?????.

??? ?????? ?? ??? ?? ??? ???? ???.

??? ?? ?? ??? ??? ???? ? ??? ?? ??? ?? ?? ??? ??? ????? ? ??? ?? ID ??? ???? ???.

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

?? ? ??? ??? ??? ???, ?? ????? ??? ? ????. ?, ?? ??? ???? ???? ???? ????.

?? ?? ID? ??? ??? ?? ??? ? ??? ??? ??? ? ????. ?? ??? ?? ??? ??? ? ????. ??? ??? ??? ?????.

?? ?? ? ???? B2? B2a? ??? ?????? ?? B2a? ?? ID? B2? ???? ??? ? ? ????. ??? ?? ???? ? ? ?? ??? ?? ??????.

?? ??? ??

??? ???? ?? ???? Zustand ??? ???? ?????.

Dnd-kit? ???? ??? activeItem??, ??? ?? ??? overItem?? ?????. ??? ?? ???? ????? ?? activeItem? overItem? ??? ???? ?? ?????.

?? ??? ?? Dnd-kit??? ?? ??? ? ?? arrayMove ???? ?????. ?? ?? https://docs.dndkit.com/presets/sortable

??? ??? ?? ??(??)??? ?? ?? ???? ???, ?? ?? ??????. ?? ??? ??? ???, ????? ?? ??(?? ? ??)? ????? ? ????.

??? ??????.

?? ??? ?? A? B ??? ????? A? B ??? ?? ????? B ??? ???? ???.

? ??? ????? B ?? B? ?? ??? ??? ???? ???. ???? ?? ?? ??? overItem? ?????

?? ?? ?? ?? ??? ??? ? ?? ??? ?????.

?

???? ??? ?? https://github.com/wangfupeng1988/react-dnd-sortable-demo

???? ?? ???? ?? ??? ?? ????. ??? ??? ? Github ???? ?? ??? ???.

? ??? dnd-kit? ???? ?? ?? ??? ? ?? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!