react经验15:拖拽排序组件dnd-kit的使用经验

应用场景

列表中的成员可鼠标拖拽改变顺序

实施步骤

前置引入

import type { DragEndEvent } from '@dnd-kit/core'
import { DndContext } from '@dnd-kit/core'
import {arrayMove,/*垂直列表使用verticalListSortingStrategy,横向列表使用horizontalListSortingStrategy*/verticalListSortingStrategy,SortableContext,useSortable,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import React from "react"
//这个也是根据列表朝向选择vertical或horizontal
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"

定义列表成员，这里用的ts

//组件外定义
declare interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLLIElement> {'data-item-key': string
}
const DraggableListNode = ({ children, ...props }: DraggableTabPaneProps) => {const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({id: props['data-item-key'],})const style: React.CSSProperties = {...props.style,transform: CSS.Translate.toString(transform),transition,}return (<li {...props} ref={setNodeRef} style={style} {...attributes}>{React.Children.map(children, child => {//这里是指定一个拖拽触发的手柄，如果需要整个列表项触发拖拽，就不要这个if ((child as React.ReactElement<HTMLElement>).props.className.includes('handlemove')) {return React.cloneElement(child as React.ReactElement, {...listeners,ref: setActivatorNodeRef,})}return child})}</li>)
}

渲染列表

//组件内定义
const data=[{key:1,content:'列表项1'},{key:2,content:'列表项2'}]
const [items,setItems]=useState(data)

//组件输出部分
<ul><DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={handleDragEnd}><SortableContext items={items.map((i) => i.key)} strategy={verticalListSortingStrategy}>{//上一步声明的DraggableListNode取代了原生的li标签items.map(item=>(<DraggableListNode className="listitem" key={item.key} data-item-key={item.key}><span className="handlemove">自定义拖拽手柄</span>{item.content}</DraggableListNode>))}</SortableContext></DndContext>
</ul>

处理拖拽结束事件，改变列表项的顺序

//组件内定义
function handleDragEnd({ active, over }: DragEndEvent) {if (active.id !== over?.id) {const activeIndex = items.findIndex((i) => i.key === active.id)const overIndex = items.findIndex((i) => i.key === over?.id)const newlist= arrayMove(items, activeIndex, overIndex)setItems(newlist)}
}

以上。