---
title: "示例"
description: "附带代码的在线演示——你看到的每个文件都在页面上运行。可以直接复制，或在 StackBlitz 中打开。"
canonical_url: "https://zizigy.github.io/vue-dnd-kit/zh/docs/examples"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

每个示例都是一个小型 Vue 应用：一个带有 `DnDProvider` 的 `index.vue`，以及它需要的组件。演示下方的代码标签页正是运行它的那些文件。

## 应用

完整的界面，按你实际会构建的方式来写：多个列表、规则、浮层和键盘协同工作。

<card-group>
<card icon="i-lucide-square-kanban" title="项目看板" to="/docs/examples/board">

可以重新排序的列、WIP 上限、移入 Done 前的确认、多选和垃圾桶。

</card>

<card icon="i-lucide-calendar-days" title="周日历" to="/docs/examples/calendar">

在各天和各个半小时之间拖动的日程，吸附到网格。

</card>

<card icon="i-lucide-folder-open" title="文件管理器" to="/docs/examples/file-manager">

一棵文件夹树和一个文件网格：框选、放到文件夹上、按住 Alt 复制。

</card>

<card icon="i-lucide-blocks" title="块编辑器" to="/docs/examples/block-editor">

类似 Notion 的块：通过手柄移动、可以嵌套，还能从“/”菜单或侧边栏拖进来。

</card>

<card icon="i-lucide-chess-knight" title="国际象棋" to="/docs/examples/chess">

合法走法会亮起，手中的棋子会说明某个格子为什么被拒绝，兵会询问要升变成什么，机器人用真实的拖拽回应。

</card>

<card icon="i-lucide-text-cursor-input" title="表单构建器" to="/docs/examples/form-builder">

从面板拖出 Nuxt UI 字段，在行中并排摆放，在实时预览中填写，并导出为 Vue 代码。

</card>

<card icon="i-lucide-pen-tool" title="设计画布" to="/docs/examples/design-canvas">

可缩放画布上的画框和图层、智能参考线、按 Alt 复制，以及作为设计树的图层面板。

</card>

<card icon="i-lucide-layout-template" title="页面构建器" to="/docs/examples/page-builder">

在页面上方变成真实内容的区块、在列之间移动的元素、基于同一份数据的图层树、行内编辑。

</card>

<card icon="i-lucide-table-2" title="数据表格" to="/docs/examples/data-table">

一个包含 2,000 个任务的 Nuxt UI 表格：虚拟化、可搜索，通过行的抓手排序。

</card>
</card-group>

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.