Dnd-kit 嵌套正在工作，但没有动画

Question

我正在使用一个二维数组，这会产生 2 个嵌套的 dnd-kit 拖放字段。 嵌套的 dnd 工作得很好，但第一个在移动时对项目进行排序，但绝对没有动画（即使当我移动我的 div 时）。

这是我的代码：

import { SortableContext, arrayMove, rectSortingStrategy } from  "@dnd-kit/sortable"
import { DndContext, closestCenter } from "@dnd-kit/core"
import CreateRubriqueAdmin from "./CreateRubriqueAdmin";
import RubriqueAdmin from "./RubriqueAdmin";
import { useState } from "react";

interface AdminCartePageProps {
    Carte: any
}

export default function AdminCartePage({ Carte }: AdminCartePageProps) {
    const [ newCarte, setNewCarte ] = useState(Carte)

    function onDragEnd(event: any) {
        const { active, over } = event

        if (active.id === over.id)
            return ;

        setNewCarte((newCarte: any) => {
            const oldIndex = newCarte.findIndex((rubrique: any) => rubrique.id === active.id)
            const newIndex = newCarte.findIndex((rubrique: any) => rubrique.id === over.id)

            return (arrayMove(newCarte, oldIndex, newIndex))
        })
    }

    return (
        <div>
            <div>
                <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
                    <SortableContext items={newCarte} strategy={rectSortingStrategy}>
                        { newCarte.map((rubrique: any, index:number) => {

                            return (
                                <RubriqueAdmin key={index} newCarte={newCarte} setNewCarte={setNewCarte} rubrique={rubrique} />
                            )
                        })}
                    </SortableContext>
                </DndContext>
            </div>
        </div>
    )
}

'use client'

import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from  "@dnd-kit/sortable"
import { DndContext, closestCenter } from "@dnd-kit/core"
import ArticleAdmin from "./ArticleAdmin";
import { CSS } from "@dnd-kit/utilities";

interface RubriqueAdminProps {
    newCarte: any,
    setNewCarte: React.SetStateAction<any>,
    rubrique: any,
}

export default function RubriqueAdmin({ newCarte, setNewCarte, rubrique }: RubriqueAdminProps) {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({id: rubrique.id, animateLayoutChanges: () => false})
    const style = {
        transition,
        transform: CSS.Translate.toString(transform)
    }

    function onDragEnd(event: any) {
        const { active, over } = event

        if (active.id === over.id)
            return ;

        let tmpCarte = [...newCarte]
        const rubriqueIndex = newCarte.findIndex((rub: any) => rub.id === rubrique.id)
        const oldIndex = rubrique.articles.findIndex((article: any) => article.id === active.id)
        const newIndex = rubrique.articles.findIndex((article: any) => article.id === over.id)
        tmpCarte[rubriqueIndex].articles = arrayMove(newCarte[rubriqueIndex].articles, oldIndex, newIndex)

        setNewCarte(tmpCarte)
    }

    return (
        <div ref={setNodeRef} {...attributes} {...listeners} style={style}>
            <h1>{rubrique.type}</h1>
            <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
                <SortableContext items={rubrique.articles} strategy={verticalListSortingStrategy}>
                    { rubrique.articles.map((article: any, index:number) => {

                        return (
                            <ArticleAdmin key={index} newCarte={newCarte} setNewCarte={setNewCarte} rubrique={rubrique} article={article} />
                        )
                    })}
                </SortableContext>
            </DndContext>
        </div>
    )
}

'use client'

import { useSortable } from  "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities";

interface ArticleAdminProps {
    newCarte: any,
    setNewCarte: React.SetStateAction<any>,
    rubrique: any,
    article: any
}

export default function ArticleAdmin({ newCarte, setNewCarte, rubrique, article }: ArticleAdminProps) {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({id: article.id, animateLayoutChanges: () => false})
    const style = {
        transition,
        transform: CSS.Translate.toString(transform)
    }

    return (
        <div ref={setNodeRef} {...attributes} {...listeners} style={style}>
            <p>{article.Titre}</p>
            <p>{article.Prix + ' €'}</p>
        </div>
    )
}

这是我的数据示例：

[
  {
    "articles": [
      {
        "Description": "",
        "Prix": 0,
        "Titre": "DELIRIUM RED ",
        "Vege": false,
        "id": ":R1ffakqH1:"
      },
      {
        "Description": "",
        "Prix": 0,
        "Titre": "BENEDIKTINER WEISS",
        "Vege": false,
        "id": ":R1ffakqH2:"
      }
    ],
    "description": "15 bières à la pression\nPlus de 150 bières en bouteilles",
    "id": ":R1ffakq:",
    "type": "BIERES"
  },
  {
    "articles": [
      {
        "Description": "(pain toasté, steak haché 150 g, salade, tomates fraîches, oignons rouges, cornichons, cheddar, sauce mayo-ketchup)",
        "Prix": 11,
        "Titre": "ROCK'N EAT",
        "Vege": false,
        "id": ":R1ffakqHh:"
      },
      {
        "Description": "(pain toasté, galette de légumes, salade, tomates fraîches, oignons rouges, cornichons, sauce moutarde miel)",
        "Prix": 12.5,
        "Titre": "SEND ME AN ANGEL",
        "Vege": true,
        "id": ":R1ffakqHi:"
      }
    ],
    "description": "Servi avec des frites",
    "id": ":R1ffakqHg:",
    "type": "BURGER"
  }
]

正如我在上面告诉你的，这是第一个完全不显示动画的 dnd，另一个则工作得很好。

我尝试使代码尽可能相关，希望它具有可读性并且不会太多消化不良

感谢您的宝贵时间

Answer 1

我刚刚在github中找到了这个https://github.com/clauderic/dnd-kit/discussions/357#discussioncomment-1018851

SortableContext 应该接收原始类型数组形式的项目，其中每个项目都是唯一的。尝试这样的事情：

<SortableContext items={rubrique.articles.map(article => article.id)} ...