vue-dnd-kit

Documentation/Prise en main

Démarrage rapide

Une liste triable en trois fichiers — un provider, une liste et ses lignes.

Modifier cette page

Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais

Voici le tout, en fonctionnement. Faites glisser une ligne, ou atteignez-en une avec Tab, appuyez sur Space, déplacez-la avec les flèches et appuyez de nouveau sur Space.

Live

Chargement de la démo…

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

<template>
  <!-- The provider goes around the components that drag (often the whole app). -->
  <DnDProvider>
    <TaskList />
  </DnDProvider>
</template>

Pas à pas

Enveloppez l'application dans un provider

DnDProvider gère le glissement. Chaque composable doit s'exécuter dans un composant rendu à l'intérieur de celui-ci — et non dans le composant dont le template le contient.

Créez une liste

makeSortableList prend l'élément de la liste et votre tableau. Il renvoie items : un brouillon qui se réordonne en direct pendant le glissement. Rendez le brouillon, pas votre tableau, et utilisez l'id des lignes comme clé.

Créez les lignes

Chaque ligne appelle makeSortableItem avec son élément et l'item qu'elle rend. Sa clé vient de item.id.

Au dépôt, tasks reçoit le nouvel ordre — c'est une ref ordinaire, le reste de votre application voit donc le changement comme n'importe quel autre.

Vous utilisez Pinia, un serveur ou des données immuables ? Passez un getter au lieu d'une ref, puis appelez e.preventDefault() dans onDrop et appliquez e.result vous-même.