---
title: "Beispiele"
description: "Live-Demos mit ihrem Code – jede Datei, die du siehst, läuft auf der Seite. Kopiere sie oder öffne sie in StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/de/docs/examples"
---

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

Jedes Beispiel ist eine kleine Vue-App: eine `index.vue` mit ihrem `DnDProvider` und den
Komponenten, die sie braucht. Die Code-Tabs unter einer Demo sind genau die Dateien, die sie
ausführen.

## Apps

Ganze Oberflächen, so wie du sie bauen würdest: mehrere Listen, Regeln, Overlays und die Tastatur
im Zusammenspiel.

<card-group>
<card icon="i-lucide-square-kanban" title="Projekt-Board" to="/docs/examples/board">

Spalten, die du umsortierst, WIP-Limits, eine Bestätigung vor Done, Mehrfachauswahl und ein
Papierkorb.

</card>

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

Termine, die über Tage und halbe Stunden gezogen werden, am Raster eingerastet.

</card>

<card icon="i-lucide-folder-open" title="Dateimanager" to="/docs/examples/file-manager">

Ein Ordnerbaum und ein Raster aus Dateien: Auswahl per Auswahlrahmen, Drops auf Ordner, Alt zum
Kopieren.

</card>

<card icon="i-lucide-blocks" title="Block-Editor" to="/docs/examples/block-editor">

Blöcke wie in Notion, an ihren Handles verschoben, verschachtelt und aus einem „/“-Menü oder der
Seitenleiste hereingezogen.

</card>

<card icon="i-lucide-chess-knight" title="Schach" to="/docs/examples/chess">

Gültige Züge leuchten auf, die Figur in der Hand sagt, warum ein Feld abgelehnt wird, ein Bauer
fragt, was er wird, und ein Bot spielt mit echten Drags zurück.

</card>

<card icon="i-lucide-text-cursor-input" title="Formular-Builder" to="/docs/examples/form-builder">

Nuxt-UI-Felder aus einer Palette, in Zeilen nebeneinandergesetzt, in einer Live-Vorschau
ausgefüllt und als Vue-Code exportiert.

</card>

<card icon="i-lucide-pen-tool" title="Design-Canvas" to="/docs/examples/design-canvas">

Frames und Ebenen auf einer zoombaren Leinwand, Smart Guides, Alt zum Duplizieren und ein
Ebenen-Panel, das der Baum des Designs ist.

</card>

<card icon="i-lucide-layout-template" title="Page-Builder" to="/docs/examples/page-builder">

Abschnitte, die über der Seite zum echten Ding werden, Elemente zwischen Spalten, ein
Ebenenbaum auf denselben Daten, Bearbeiten direkt im Text.

</card>

<card icon="i-lucide-table-2" title="Datentabelle" to="/docs/examples/data-table">

Eine Nuxt-UI-Tabelle mit 2.000 Aufgaben: virtualisiert, durchsuchbar, sortiert an den Griffen ihrer
Zeilen.

</card>
</card-group>

## Sitemap

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