Introduction

Vue DnD Kit, c'est le glisser-déposer pour Vue 3. Listes triables, tableaux kanban, arbres, multi-drag, copie et zones de dépôt — animés, utilisables au clavier et annoncés aux lecteurs d'écran d'emblée, dans votre propre balisage.

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Trip from './Trip.vue';
</script>

<template>
  <DnDProvider>
    <Trip />
  </DnDProvider>
</template>

Rien de tout cela n'est du code propre à la démo : les listes se réordonnent en direct, les colonnes s'échangent des étapes (un seul group), une sélection se déplace d'un bloc (selected), Alt transforme un déplacement en copie (clone), et le clavier fait tout cela d'emplacement en emplacement. La démo rend les étapes et passe quelques options.

De quoi s'agit-il ?

Un ensemble de composables et un seul composant provider. Vous rendez vos propres éléments et passez leurs refs de template aux composables ; la bibliothèque s'occupe du reste : les entrées au pointeur, tactiles et au clavier, la recherche de la cible, le réordonnancement, les animations, le défilement automatique et les annonces aux lecteurs d'écran.

<script setup lang="ts">
const listRef = useTemplateRef<HTMLElement>('list');
// `items` is the draft: it reorders while you drag. On drop, `day.stops` gets the new order.
const { items } = makeSortableList(listRef, { items: toRef(props.day, 'stops'), group: 'trip' });
</script>

<template>
  <ul ref="list">
    <StopCard v-for="stop in items" :key="stop.id" :stop="stop" />
  </ul>
</template>

Elle ne rend rien d'elle-même, sauf un overlay flottant — par défaut, un clone de l'élément en cours de glissement. Votre balisage et vos styles restent les vôtres : la bibliothèque ajoute des attributs ARIA, et quelques attributs data-dnd-* pour styliser les états d'un glissement.

Ce que vous obtenez

• Des listes et des grilles triables, qui se réordonnent en direct pendant le glissement, à la verticale, à l'horizontale ou en grille.
• Des listes qui partagent des items : tableaux kanban, palettes qui distribuent des copies, échanges, règles sur ce qui va où.
• Des arbres, avec imbrication par un glissement de côté ou par survol d'une ligne, limites de profondeur et règles.
• Le multi-drag, avec votre propre sélection (Ctrl/Cmd-clic, rectangle de sélection) : le bloc se déplace d'un seul tenant.
• Des zones de dépôt avec des règles d'acceptation, et des dépôts que vous confirmez, refusez ou appliquez vous-même.
• Des animations par défaut : les items glissent vers leur nouvelle place, le dépôt atterrit sur son emplacement, une annulation revient à sa place.
• L'accessibilité : glissement au clavier par emplacements, annonces en direct, attributs ARIA.
• Des listes virtuelles avec TanStack Virtual ou VueUse : des milliers de lignes.
• Capteurs et actions : vos propres périphériques d'entrée, et des glissements scriptés depuis le code.
• DevTools : un onglet avec une carte en direct de chaque liste, un joystick et un journal de chaque glissement.

Ce qui le distingue

• Vos données restent les vôtres jusqu'au dépôt. Vous rendez un brouillon de votre tableau. Pendant le glissement, seul le brouillon bouge ; au dépôt, la bibliothèque écrit le nouvel ordre dans votre ref, ou vous remet e.result pour que vous l'appliquiez vous-même (stores, serveurs, annulation).
• Aucun composant d'enveloppe. Les lignes sont vos éléments, avec une ref et un seul appel : les composants d'un kit d'UI (Nuxt UI, Vuetify, le vôtre) glissent donc tels quels.
• Animé par défaut, sans jamais vous gêner. Les réordonnancements, les atterrissages et les annulations s'animent d'emblée ; désactivez-les, réglez-les, ou confiez-les à GSAP ou à motion.
• Le clavier n'est pas une pensée après coup. Chaque glissement peut se faire avec Space et les flèches, les déplacements sont annoncés, et le focus revient là où il était.
• Un seul provider pour toute l'application. Les zones donnent à des parties de la page leurs propres règles (un axe, des limites, une grille, un appui plus long) : des fonctionnalités imbriquées n'ont donc pas besoin de providers imbriqués.
• Les entrées sont modulaires. Le pointeur et le clavier sont des capteurs ; écrivez le vôtre pour une manette ou une commande vocale, ou déplacez des items depuis le code avec @vue-dnd-kit/actions.

Comment tout s'articule

Prérequis

• Vue 3.5 ou plus récent.
• Navigateurs modernes : Chrome et Edge 104+, Safari 15.4+, Firefox 104+.
• Compatible avec le SSR et Nuxt : l'overlay et la région live se montent côté client.

Ensuite : installez-le, puis créez une première liste dans le Démarrage rapide.