vue-dnd-kit

Dokumentation/Erste Schritte

Schnellstart

Eine sortierbare Liste in drei Dateien – ein Provider, eine Liste und ihre Zeilen.

Diese Seite bearbeiten

Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen

Hier läuft das Ganze schon. Ziehe eine Zeile – oder springe mit Tab zu einer, drücke Space, bewege sie mit den Pfeiltasten und drücke wieder Space.

Live

Demo wird geladen…

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

Schritt für Schritt

Umschließe die App mit einem Provider

DnDProvider verantwortet den Drag. Jedes Composable muss in einer Komponente laufen, die in ihm gerendert wird – nicht in der Komponente, deren Template ihn enthält.

Erstelle eine Liste

makeSortableList nimmt das Element der Liste und dein Array entgegen. Es gibt items zurück: einen Entwurf, der sich schon während des Ziehens neu ordnet. Rendere den Entwurf, nicht dein Array, und verwende die ID als Schlüssel der Zeilen.

Erstelle die Zeilen

Jede Zeile ruft makeSortableItem mit ihrem Element und dem Datenelement auf, das sie rendert. Ihr Schlüssel kommt aus item.id.

Wenn der Drop landet, bekommt tasks die neue Reihenfolge – es ist ein normaler ref, also sieht der Rest deiner App die Änderung wie jede andere.

Nutzt du Pinia, einen Server oder unveränderliche Daten? Übergib einen Getter statt eines Refs, rufe dann e.preventDefault() in onDrop auf und wende e.result selbst an.