Dnd-kit的用法

import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { DndContext, DragOverlay } from "@dnd-kit/core";
import {CSS} from '@dnd-kit/utilities';
import { SortableContext, useSortable } from "@dnd-kit/sortable";


interface DragOptionItemProps {
    id: string | number;
    data?: any
}
function DragOptionItem({
    id,
    data
}: DragOptionItemProps) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging
      } = useSortable({
        id,
      });
      const style = {
        transform: CSS?.Transform?.toString(transform && { ...transform, scaleY: 1 }),
        transition,
      };
    return (
        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>{data?.title}</div>
    )
}

function DragCom() {
    const data = [
        { id: '1111', title:'zzzzz'},
        { id: '2222', title:'sssss'},
        { id: '3333', title:'uuuuu'}
    ];
    const onDragEnd = (event: any) => {
        console.log('event', event)
    }
    const handleDragStart = (event: any) => {
        console.log('event', event)
    }
    return (
        <DndContext
            modifiers={[restrictToVerticalAxis]}
            onDragStart={handleDragStart}
            onDragEnd={onDragEnd}>
            <SortableContext items={data}>
                {
                    data?.map((it: any, index: number) => {
                        return (
                            <DragOptionItem key={it.id} id={it.id} data={it} />
                        )
                    })
                }
            </SortableContext>
        </DndContext>
    )
}
export default DragCom;

重点：使用SortableContext 必须使用useSortable，否则不生效