---
title: "サンプル"
description: "コード付きのライブデモ。表示されているファイルはすべて、このページ上で動いています。コピーするか、StackBlitz で開いてください。"
canonical_url: "https://zizigy.github.io/vue-dnd-kit/ja/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">

日と 30 分刻みの枠をまたいでドラッグする予定。グリッドにスナップします。

</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.