---
title: "Exemples"
description: "Des démos en direct avec leur code — chaque fichier que vous voyez tourne sur la page. Copiez-les, ou ouvrez-les dans StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/fr/docs/examples"
---

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

Chaque exemple est une petite application Vue : un `index.vue` avec son `DnDProvider`, et les
composants dont il a besoin. Les onglets de code sous une démo sont les fichiers mêmes qui la font
tourner.

## Applications

Des interfaces complètes, telles que vous les construiriez : plusieurs listes, des règles, des
overlays et le clavier qui fonctionnent ensemble.

<card-group>
<card icon="i-lucide-square-kanban" title="Tableau de projet" to="/docs/examples/board">

Des colonnes que vous réordonnez, des limites WIP, une confirmation avant Done, la sélection
multiple et une corbeille.

</card>

<card icon="i-lucide-calendar-days" title="Calendrier de la semaine" to="/docs/examples/calendar">

Des événements glissés d'un jour et d'une demi-heure à l'autre, alignés sur la grille.

</card>

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

Une arborescence de dossiers et une grille de fichiers : sélection au rectangle, dépôt sur les
dossiers, Alt pour copier.

</card>

<card icon="i-lucide-blocks" title="Éditeur de blocs" to="/docs/examples/block-editor">

Des blocs à la Notion, déplacés par leur poignée, imbriqués et glissés depuis un menu « / » ou
la barre latérale.

</card>

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

Les coups légaux s'allument, la pièce en main dit pourquoi une case est refusée, un pion demande
ce qu'il devient, et un bot répond avec de vrais glissements.

</card>

<card icon="i-lucide-text-cursor-input" title="Constructeur de formulaires" to="/docs/examples/form-builder">

Des champs Nuxt UI depuis une palette, placés côte à côte en rangées, remplis dans un aperçu en
direct et exportés en code Vue.

</card>

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

Des frames et des calques sur un canevas zoomable, des repères intelligents, Alt pour dupliquer,
et un panneau des calques qui est l'arbre du design.

</card>

<card icon="i-lucide-layout-template" title="Constructeur de pages" to="/docs/examples/page-builder">

Des sections qui deviennent l'élément réel au-dessus de la page, des éléments entre les colonnes,
un arbre des calques sur les mêmes données, l'édition sur place.

</card>

<card icon="i-lucide-table-2" title="Tableau de données" to="/docs/examples/data-table">

Un tableau Nuxt UI de 2 000 tâches : virtualisé, avec recherche, trié par les poignées de ses
lignes.

</card>
</card-group>

## Sitemap

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