React中使用dnd-kit实现拖曳排序功能

最新推荐文章于 2025-03-30 10:51:37 发布

DDOS防御

最新推荐文章于 2025-03-30 10:51:37 发布

阅读量521

点赞数

分类专栏：网络技术文章标签： vue.js javascript 前端

原文链接：https://www.yunjiasu.cc

版权

网络技术专栏收录该内容

142 篇文章

订阅专栏

在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，你可以根据需要进一步自定义拖拽行为和样式。