使用dnd-kit在react下实现一个可拖动排序的列表

react-dnd-kit 是一个灵活且高性能的拖放库，专为 React 应用设计，允许开发者轻松实现复杂的拖放交互。在这个教程中，我们将学习如何使用 react-dnd-kit 创建一个简单的拖放示例。

---

1. 安装 react-dnd-kit

首先，确保你有一个 React 项目。如果还没有，可以使用 Create React App 创建一个新项目：

bash
复制代码
npx create-react-app my-dnd-app
cd my-dnd-app

接下来，安装dnd相关模块：

bash
复制代码
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @dnd-kit/modifiers

---

2. 创建一个可排序列表

为了使列表项可以排序，我们需要使用 @dnd-kit/sortable。以下是如何实现的：

修改 DraggableList.js，添加排序逻辑：

javascript
复制代码
/* eslint-disable react/prop-types */

import React from 'react';


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

const DraggableItem = ({ id, children }) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      style={{
        padding: '8px',
        margin: '4px',
        background: 'lightblue',
        cursor: 'grab',
        transform: CSS.Transform.toString(transform),
        transition,
      }}
    >
      {children}
    </div>
  );
};

const DroppableArea = ({ children }) => {
  const { setNodeRef } = useDroppable({ id: 'droppable' });
  return (
    <div ref={setNodeRef} style={{ padding: '16px', border: '2px dashed lightgray' }}>
      {children}
    </div>
  );
};

const DraggableList = () => {
  const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3']);
  const handleDragEnd = (event) => {
    const { active, over } = event;
    if(active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);
        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
      <DroppableArea>
        <SortableContext items={items} onDragEnd={handleDragEnd}>
          {items.map((item) => (
            <DraggableItem key={item} id={item}>
              {item}
            </DraggableItem>
          ))}
        </SortableContext>
      </DroppableArea>
    </DndContext>
  );
};

export default DraggableList;

3. 使用组件

在 src/App.js 中使用 DraggableList 组件：

javascript
复制代码
import React from 'react';
import { DndContext } from '@dnd-kit/core';
import DraggableList from './DraggableList';

function App() {
  return (
    <DndContext>
      <h1>Drag and Drop List</h1>
      <DraggableList />
    </DndContext>
  );
}

export default App;

4. 运行项目

在项目根目录下，启动开发服务器：

bash
复制代码
npm start

打开浏览器访问 http://localhost:3000，你会看到一个可拖动排序的列表。

---

总结

通过这个教程，你学习了如何使用 react-dnd-kit 创建一个简单的拖放列表，并实现了排序功能。react-dnd-kit 提供了强大的 API，使得实现复杂的拖放交互变得简单而高效。

接下来，你可以探索更多高级特性，比如自定义拖动效果、实现多个拖放区域等，以丰富你的应用交互体验。