DnD Kit Demos

项目介绍

这是一个基于 React 的拖拽组件演示项目，使用 @dnd-kit 库实现了高性能、灵活的拖拽交互功能。项目展示了如何创建可排序列表、拖拽添加元素等功能，适合用于问卷系统、表单构建器、看板等需要拖拽功能的应用场景。

功能特点

• 🚀 基于 React 19 和 Vite 构建
• 📦 使用 TypeScript 提供类型安全
• 🎯 展示拖拽元素添加到列表
• 🔄 列表项目排序功能
• 🎨 使用 Tailwind CSS 进行样式设计

安装步骤

确保您已安装 Node.js (推荐 v18 或更高版本) 和 pnpm。

1. 克隆仓库

git clone https://github.com/yourusername/dnd-kit-demos.git
cd dnd-kit-demos

2. 安装依赖

pnpm install

3. 启动开发服务器

pnpm dev

4. 打开浏览器访问 http://localhost:5173/

示例说明

基础拖拽示例

基础示例展示了如何：

• 从组件库中拖拽新组件到列表
• 对列表中的项目进行排序

代码实现位于 src/BasicDemo 目录。

技术栈

• React - 用户界面库
• TypeScript - 类型安全的 JavaScript 超集
• Vite - 前端构建工具
• @dnd-kit - 拖拽功能库
• Tailwind CSS - 原子化 CSS 框架

许可证

MIT