在React中使用dnd-kit
库实现拖拽排序功能,你需要遵循以下步骤:
-
安装dnd-kit:首先,确保你已经安装了
dnd-kit
库。如果还没有安装,可以通过npm或yarn来安装:npm install @dnd-kit/core
-
引入必要的组件和钩子:从
dnd-kit
中引入Draggable
、DragOverlay
和useDraggable
等组件和钩子。 -
设置拖拽列表:使用
Draggable
组件来包裹可拖拽的元素,并设置其属性。 -
处理拖拽事件:使用
useDraggable
钩子来处理拖拽过程中的事件,如开始拖拽、拖拽中和拖拽结束。 -
渲染拖拽覆盖层:使用
DragOverlay
组件来渲染拖拽时的覆盖层。 -
更新数据:在拖拽结束时,根据拖拽元素的新位置更新你的数据。
下面是一个简单的拖拽排序功能的示例代码:
import React, { useState } from 'react';
import { Draggable, Droppable, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
const initialItems = ['item-1', 'item-2', 'item-3'];
const [items, setItems] = useState(initialItems);
function SortableList() {
const handleDragEnd = (event) => {
const { active, over } = event;
if (active.id !== over.id) {
const oldIndex = initialItems.indexOf(active.id);
const newIndex = initialItems.indexOf(over.id);
setItems((prevItems) => {
const newItems = [...prevItems];
[newItems[oldIndex], newItems[newIndex]] = [newItems[newIndex], newItems[oldIndex]];
return newItems;
});
}
};
return (
<div>
<DragOverlay>
{active && (
<div style={{ transform: `translate(${active.offset.x}px, ${active.offset.y}px)` }}>
{active.id}
</div>
)}
</DragOverlay>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{items.map((item) => (
<Draggable key={item} id={item} onDragEnd={handleDragEnd}>
{(dragRef, dragProps) => (
<div ref={dragRef} {...dragProps}>
{item}
</div>
)}
</Draggable>
))}
</div>
</div>
);
}
export default SortableList;
在这个示例中,我们创建了一个可拖拽的列表,列表中的每个元素都被包裹在Draggable
组件中。我们使用useDraggable
钩子来处理拖拽结束事件,并根据拖拽元素的新位置更新列表数据。
请注意,dnd-kit
提供了高度可定制的拖拽API,你可以根据需要进一步自定义拖拽行为和样式。