首页手记 Dnd-Kit项目实战：零基础入门教程

Dnd-Kit项目实战：零基础入门教程

标签：

JavaScript 前端工具 React.JS

概述

本文介绍了Dnd-Kit项目实战，包括安装、基本设置、拖拽组件的使用以及高级功能的实现。通过示例代码详细展示了如何创建可拖拽的待办事项列表应用，并提供了删除和编辑功能。文中还分享了Dnd-Kit的进阶功能和使用技巧，帮助开发者更好地掌握拖拽交互的实现。整个过程涵盖了从基础到实战的全面指导，适合不同水平的开发者学习和实践。

Dnd-Kit简介与安装

Dnd-Kit是一款用于创建可拖拽组件的React库，它提供了强大的API和丰富的组件，使得开发者可以轻松地实现复杂的拖拽交互。Dnd-Kit适合任何需要拖拽功能的Web应用，包括但不限于待办事项列表、游戏、UI布局等。

什么是Dnd-Kit

Dnd-Kit的核心功能包括：

基本拖拽行为：提供基本的拖拽组件，支持元素的拖动。
事件处理：支持拖拽事件的监听和回调处理。
约束与限制：可以为拖拽元素设置约束和限制，例如只允许在特定区域内拖拽。
自定义样式：支持自定义拖拽元素的样式和外观。

Dnd-Kit的设计理念是让开发者可以快速地实现拖拽功能，同时保持代码的简洁和可维护性。

安装Dnd-Kit的方法

要使用Dnd-Kit，首先需要安装它。可以通过npm或者yarn来安装Dnd-Kit。以下是安装步骤：

使用npm安装：
```
npm install dnd-kit
```
使用yarn安装：
```
yarn add dnd-kit
```

安装完成后，可以通过import语句引入Dnd-Kit的库：

import { DndContext, useDrag, useDrop } from "dnd-kit";

基本的Dnd-Kit项目设置

在使用Dnd-Kit之前，需要进行一些基本的项目设置。这包括设置DndContext和简单的拖拽组件。

首先，创建一个简单的React应用，并引入Dnd-Kit。以下是一个简单的示例：

import React from 'react';
import { DndContext, useDrag, useDrop } from "dnd-kit";
import "./App.css";

function App() {
  return (
    <DndContext>
      <div className="App">
        <DraggableComponent />
      </div>
    </DndContext>
  );
}

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      拖拽我
    </div>
  );
}

export default App;

在这个示例中，DndContext为整个应用提供了拖拽上下文。DraggableComponent是一个可以被拖拽的组件，它使用了useDrag钩子来实现拖拽功能。

创建基础的拖拽组件

使用Dnd-Kit的基本组件

Dnd-Kit提供了一些基本的组件，如Draggable和Droppable，用于创建可拖拽和可放置的元素。下面是一个简单的示例，展示如何创建一个可拖拽的元素：

import React from 'react';
import { DndContext, Draggable, DropTarget } from "dnd-kit";

function DraggableComponent() {
  return (
    <Draggable>
      <div>拖拽我</div>
    </Draggable>
  );
}

function App() {
  return (
    <DndContext>
      <div className="App">
        <DraggableComponent />
      </div>
    </DndContext>
  );
}

export default App;

在这个示例中，Draggable组件包裹了一个div元素，使其成为可拖拽的。DndContext组件将拖拽上下文提供给整个应用。

实现基础的拖拽功能

为了实现基础的拖拽功能，我们需要使用useDrag和useDrop这两个Hooks。useDrag用于创建可拖拽的元素，而useDrop用于创建可放置的区域。

import React from 'react';
import { DndContext, useDrag, useDrop } from "dnd-kit";

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      拖拽我
    </div>
  );
}

function DropZoneComponent() {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: "draggable",
    drop: () => {},
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));
  return (
    <div ref={drop} style={{ backgroundColor: isOver ? "lightblue" : "lightgray" }}>
      我可以接受拖拽
    </div>
  );
}

function App() {
  return (
    <DndContext>
      <div className="App">
        <DraggableComponent />
        <DropZoneComponent />
      </div>
    </DndContext>
  );
}

export default App;

自定义拖拽组件样式

在Dnd-Kit中，可以通过CSS和React的内置样式来自定义拖拽组件的外观。以下是一个示例，展示如何添加拖拽元素的样式：

import React from 'react';
import { useDrag } from "dnd-kit";

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      拖拽我
    </div>
  );
}

const baseStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "lightblue",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "grab",
  border: "2px solid #000",
};

function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

export default App;

在这个示例中，baseStyle定义了拖拽元素的基本样式，包括宽度、高度、背景颜色等。isDragging状态用于调整元素的透明度，从而在拖拽过程中显示拖拽状态。

拖拽事件与回调

事件监听与回调函数

Dnd-Kit提供了一些事件，如onDragStart、onDragEnd和onDragMove，用于监听拖拽事件并执行相应的回调函数。以下是一个示例，展示如何监听拖拽的开始和结束事件：

import React from 'react';
import { useDrag } from "dnd-kit";

function DraggableComponent() {
  const [{ isDragging }, drag, setDrag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    onDragStart: () => {
      console.log("拖拽开始");
    },
    onDragEnd: () => {
      console.log("拖拽结束");
    },
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      拖拽我
    </div>
  );
}

const baseStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "lightblue",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "grab",
  border: "2px solid #000",
};

function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

export default App;

使用Dnd-Kit的事件处理

Dnd-Kit提供了强大的事件处理机制，可以轻松地处理各种拖拽事件。以下是一个示例，展示如何处理拖拽中的移动事件：

import React from 'react';
import { useDrag } from "dnd-kit";

function DraggableComponent() {
  const [{ isDragging, x, y }, drag, setDrag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      x: monitor.getInitialSourceClientOffset().x,
      y: monitor.getInitialSourceClientOffset().y,
    }),
    onDragMove: () => {
      console.log("当前位置:", x, y);
    },
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      拖拽我
    </div>
  );
}

const baseStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "lightblue",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "grab",
  border: "2px solid #000",
};

function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

export default App;

在这个示例中，x和y属性用于获取拖拽元素的当前位置，onDragMove事件处理函数会在拖拽过程中实时更新位置信息。

示例：拖拽位置更新的实时反馈

为了实时反馈拖拽位置，可以在拖拽过程中更新元素的位置。以下是一个示例，展示如何实时更新拖拽元素的位置：

import React from 'react';
import { useDrag } from "dnd-kit";

function DraggableComponent() {
  const [{ isDragging, x, y }, drag] = useDrag(() => ({
    type: "draggable",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      x: monitor.getClientOffset().x,
      y: monitor.getClientOffset().y,
    }),
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, transform: `translate(${x}px, ${y}px)` }}>
      拖拽我
    </div>
  );
}

const baseStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "lightblue",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "grab",
  border: "2px solid #000",
};

function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

export default App;

在这个示例中，使用transform属性实时更新元素的位置。这样可以在拖拽过程中动态地改变元素的位置，提供实时的反馈。

进阶功能：拖拽目标与约束

定义可拖拽目标

在一些情况下，你可能需要定义多个可拖拽的目标。Dnd-Kit允许你通过type属性定义不同的拖拽类型。以下是一个示例，展示如何定义多个拖拽目标：

import React from 'react';
import { useDrag, useDrop } from "dnd-kit";

function DraggableComponent({ type }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      拖拽我 ({type})
    </div>
  );
}

function DropZoneComponent() {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: ["type1", "type2"],
    drop: () => {},
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));
  return (
    <div ref={drop} style={{ backgroundColor: isOver ? "lightblue" : "lightgray" }}>
      我可以接受拖拽类型1和类型2
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <DraggableComponent type="type1" />
      <DraggableComponent type="type2" />
      <DropZoneComponent />
    </div>
  );
}

export default App;

在这个示例中，DraggableComponent组件通过type属性定义了不同的拖拽类型。DropZoneComponent组件则通过accept属性指定可以接受哪些拖拽类型。

添加拖拽约束与限制

在实际应用中，你可能希望限制拖拽元素的移动范围。Dnd-Kit提供了约束和限制的功能，可以通过restrictMove和restrictMoveToGrid等选项来实现。以下是一个示例，展示如何限制拖拽元素的移动范围：

import React from 'react';
import { useDrag } from "dnd-kit";

function DraggableComponent({ type }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type,
    restrictMove: {
      min: { x: 0, y: 0 },
      max: { x: 300, y: 300 },
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      拖拽我 ({type})
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <DraggableComponent type="type1" />
    </div>
  );
}

export default App;

在这个示例中，restrictMove选项指定了拖拽元素的移动范围，只能在指定的范围内移动。

实战演示：拖拽到特定区域

为了更具体地演示拖拽到特定区域的功能，以下是一个示例，展示如何将拖拽元素放置到特定的区域：

import React from 'react';
import { useDrag, useDrop } from "dnd-kit";

function DraggableComponent({ type, content }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  return (
    <div ref={drag} style={{ ...baseStyle, opacity: isDragging ? 0.5 : 1 }}>
      {content}
    </div>
  );
}

function DropZoneComponent({ index }) {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: "draggable",
    drop: () => {},
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));
  return (
    <div ref={drop} style={{ backgroundColor: isOver ? "lightblue" : "lightgray" }}>
      区域 {index}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <DraggableComponent type="draggable" content="拖拽我" />
      <DropZoneComponent index={1} />
      <DropZoneComponent index={2} />
    </div>
  );
}

export default App;

在这个示例中，DraggableComponent组件是一个可拖拽的元素，DropZoneComponent组件则定义了可以放置拖拽元素的区域。

项目实战：创建一个简单的待办事项列表应用

构建任务列表界面

创建一个简单的待办事项列表应用是Dnd-Kit的一个典型应用场景。首先，我们需要构建任务列表的基本界面。

import React from 'react';

function TodoItem({ text, onDelete }) {
  return (
    <div style={{ padding: "10px", border: "1px solid lightgray", marginBottom: "10px" }}>
      {text}
      <button onClick={onDelete}>删除</button>
    </div>
  );
}

function TodoList({ todos, onRemove }) {
  return (
    <div style={{ padding: "20px", border: "1px solid lightgray" }}>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo} onDelete={() => onRemove(index)} />
      ))}
    </div>
  );
}

function App() {
  const [todos, setTodos] = React.useState(["任务1", "任务2", "任务3"]);

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <TodoList todos={todos} onRemove={removeTodo} />
    </div>
  );
}

export default App;

在这个示例中，TodoItem组件展示了一个待办事项，并提供删除按钮。TodoList组件则渲染了一组待办事项，使用map方法遍历todos数组，并为每个事项提供删除功能。

实现任务拖拽排序功能

接下来，我们将为待办事项列表添加拖拽排序功能。这将涉及到使用Dnd-Kit的拖拽组件和事件处理。

import React from 'react';
import { useDrag, useDrop } from 'dnd-kit';

function TodoItem({ index, text, onMove }) {
  const [{ isDragging }, drag, setDrag] = useDrag(() => ({
    type: 'todo',
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    onMove: (dragIndex, hoverIndex) => onMove(dragIndex, hoverIndex),
  }));

  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'todo',
    drop: () => {},
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));

  return (
    <div ref={drag} ref={drop} style={{ ...baseStyle, opacity: isDragging || isOver ? 0.5 : 1 }}>
      {text}
      <button onClick={() => onMove(index, index - 1)}>上移</button>
      <button onClick={() => onMove(index, index + 1)}>下移</button>
    </div>
  );
}

function TodoList({ todos, onMove }) {
  return (
    <div>
      {todos.map((todo, index) => (
        <TodoItem key={index} index={index} text={todo} onMove={onMove} />
      ))}
    </div>
  );
}

function App() {
  const [todos, setTodos] = React.useState(["任务1", "任务2", "任务3"]);

  const moveTodo = (dragIndex, hoverIndex) => {
    const newTodos = [...todos];
    const draggedItem = newTodos[dragIndex];
    newTodos.splice(dragIndex, 1);
    newTodos.splice(hoverIndex, 0, draggedItem);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <TodoList todos={todos} onMove={moveTodo} />
    </div>
  );
}

export default App;

在这个示例中，TodoItem组件使用useDrag和useDrop钩子来实现拖拽功能。TodoList组件则渲染一组待办事项，并监听拖拽事件来更新待办事项的顺序。

添加删除和编辑任务功能

为了使待办事项列表更加实用，我们还需要添加删除和编辑任务的功能。以下是一个示例，展示如何添加这些功能：

import React from 'react';

function TodoItem({ index, text, onMove, onDelete, onEdit }) {
  const [{ isDragging }, drag, setDrag] = useDrag(() => ({
    type: 'todo',
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    onMove: (dragIndex, hoverIndex) => onMove(dragIndex, hoverIndex),
  }));

  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'todo',
    drop: () => {},
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));

  return (
    <div ref={drag} ref={drop} style={{ ...baseStyle, opacity: isDragging || isOver ? 0.5 : 1 }}>
      {text}
      <button onClick={() => onDelete(index)}>删除</button>
      <button onClick={() => onEdit(index)}>编辑</button>
    </div>
  );
}

function TodoList({ todos, onMove, onDelete, onEdit }) {
  return (
    <div>
      {todos.map((todo, index) => (
        <TodoItem key={index} index={index} text={todo} onMove={onMove} onDelete={onDelete} onEdit={onEdit} />
      ))}
    </div>
  );
}

function App() {
  const [todos, setTodos] = React.useState(["任务1", "任务2", "任务3"]);
  const [editingIndex, setEditingIndex] = React.useState(null);

  const moveTodo = (dragIndex, hoverIndex) => {
    const newTodos = [...todos];
    const draggedItem = newTodos[dragIndex];
    newTodos.splice(dragIndex, 1);
    newTodos.splice(hoverIndex, 0, draggedItem);
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const editTodo = (index) => {
    setEditingIndex(index);
  };

  const saveTodo = (index, newText) => {
    const newTodos = [...todos];
    newTodos[index] = newText;
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <TodoList todos={todos} onMove={moveTodo} onDelete={removeTodo} onEdit={editTodo} />
      {editingIndex !== null && (
        <div>
          <input
            value={todos[editingIndex]}
            onChange={(e) => saveTodo(editingIndex, e.target.value)}
            onBlur={() => setEditingIndex(null)}
            autoFocus
          />
          <button onClick={() => setEditingIndex(null)}>取消</button>
        </div>
      )}
    </div>
  );
}

export default App;

在这个示例中，TodoItem组件提供删除和编辑按钮。TodoList组件则监听这些事件并更新待办事项列表。App组件处理状态和事件逻辑。

总结与进一步学习资源

项目总结与常见问题解答

通过本教程，你已经学习了如何使用Dnd-Kit创建一个简单的待办事项列表应用，包括拖拽排序、删除和编辑功能。Dnd-Kit提供了丰富的API和组件，可以轻松地实现复杂的拖拽交互。

Dnd-Kit的未来更新与展望

Dnd-Kit团队一直在积极维护和更新库，添加新功能和优化性能。未来版本可能会引入更多高级功能和更好的性能优化。同时，社区也在不断贡献新的功能和插件，使得Dnd-Kit的应用场景越来越广泛。

通过持续关注官方文档和社区动态，你可以及时了解Dnd-Kit的新特性和最佳实践。不断学习和实践，你将能够更熟练地使用Dnd-Kit来实现复杂和有趣的拖拽交互。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

aluckdog

手记
篇

粉丝

68

获赞与收藏

394

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 313180 2205

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空