vue-dnd-kit

Dokumentation/API

makeSortableTree

Macht einen Container zu einem sortierbaren Baum, flach gerendert mit Tiefen – Verschachtelung durch Ziehen zur Seite oder durch Hovern über einem Knoten.

Diese Seite bearbeiten

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

function makeSortableTree<T>(  target: MaybeElementRef,  options: SortableTreeOptions<T>,): SortableTreeReturn<T>;

Macht einen Container zu einem sortierbaren Baum. Rendere die zurückgegebenen items (sichtbare Knoten in Entwurfsreihenfolge, eingerückt nach depth) mit einer Zeilenkomponente, die makeSortableItem aufruft. Beim Drop werden nach onDrop die verschobenen Knoten (mit ihren Teilbäumen) in options.items geschrieben, sofern event.preventDefault() event.result nicht dir überlässt.

const root = useTemplateRef<HTMLElement>('root');
const { items } = makeSortableTree(root, { items: files, indentation: 20, collapsed });

Jede Zeile ruft makeSortableItem mit id: () => node.key auf. Siehe Bäume.

Live

Demo wird geladen…

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

<template>
  <DnDProvider>
    <FileTree />
  </DnDProvider>
</template>

Optionen

Optionen von makeSortableTree. Ein Multi-Drag verschiebt die ausgewählten Knoten als einen Block, jeden mit seinem Teilbaum, an einen Platz und eine Tiefe (in Dokumentreihenfolge); ein ausgewählter Knoten innerhalb eines anderen ausgewählten fährt in dessen Teilbaum mit. Das gilt auch für den gegriffenen Knoten (wie in VS Code): Er bleibt innerhalb des ausgewählten Knotens, in dem er liegt, und dieser bewegt sich mit seinem Teilbaum, während das Overlay auf der gegriffenen Zeile bleibt. canNest und maxDepth gelten für den ganzen Block.

Die anderen Optionen bedeuten dasselbe wie bei makeSortableList. Sie nehmen einen Wert, ein Ref oder einen Getter entgegen (overlay, overOverlay, animation, dropAnimation, overDropAnimation: einen Wert oder ein Ref) und werden gelesen, wenn der Baum sie braucht, sodass eine Änderung spätestens ab dem nächsten Drag gilt. Ausnahmen: id und group werden einmal gelesen, wenn der Baum erstellt wird; items ist das Modell selbst; Funktionen (getKey, getChildren, setChildren, canNest, clone, createItem, die Callbacks) werden so übergeben, wie sie sind.

items
SortableItems<T>

Die Wurzelknoten. Ein beschreibbares Ref: Beim Drop gibt die Bibliothek den geänderten Knoten ihre neuen Kinder (setChildren) und schreibt ein neues Wurzel-Array. Eine schreibgeschützte Quelle (ein Getter, ein readonly Ref, ein computed): Rufe event.preventDefault() auf und wende event.result selbst an (wie bei SortableListOptions.items).

getKey?
(node: T) => Key

Standard: node.id. Liefert auch die Schlüssel für makeSortableItem({ item }), Kopien und erstellte Knoten.

getChildren?
(node: T) => T[]

Die Kinder eines Knotens. Standard: node.children.

setChildren?
(node: T, children: T[]) => void

Wie das Standard-Schreiben einem Knoten seine neuen Kinder gibt. Standard: node.children = children.

withChildren?
(node: T, children: T[]) => T

Eine Kopie von node mit children, für event.result: ein neuer Baum, der deine Knoten unverändert lässt (das Standard-Schreiben läuft weiterhin über setChildren). Standard: { ...node }, dem die Kinder über setChildren gegeben werden ({ ...node, children } ohne setChildren). Übergib es für Klasseninstanzen und Knoten, die mehr als eine flache Kopie brauchen.

id?
Key

Standard: useId(), stabil zwischen Server- und Client-Rendering. Wird einmal gelesen.

label?
stringWert · Ref · Getter

Der lesbare Name des Baums: Screenreader-Texte nennen ihn statt seiner ID.

data?
unknownWert · Ref · Getter

Alles, was es über den Baum als Drop-Ziel zu sagen gibt: Events tragen es als over.data, solange ein Drag über ihm ist.

activation?
ActivationOptionsWert · Ref · Getter

Wie ein Druck auf die Zeilen dieses Baums einen Drag startet, statt activation des Providers (die eigene einer Zeile gewinnt).

overlay?
ComponentWert · Ref

Overlay-Komponente für die Zeilen dieses Baums (das eigene overlay einer Zeile gewinnt). Ein mitten im Drag umgeschaltetes Ref tauscht sie sofort.

overOverlay?
ComponentWert · Ref

Was das Overlay zeigt, während ein Drag, den dieser Baum annimmt, über ihm ist (siehe SortableListOptions.overOverlay). Die Prop to der Komponente sagt, wohin der Drop verschachtelt würde.

dropAnimation?
DropAnimationWert · Ref

Wie das Overlay landet, wenn ein Drag der Zeilen dieses Baums endet (siehe SortableListOptions.dropAnimation).

overDropAnimation?
DropAnimationWert · Ref

Wie das Overlay landet, wenn es in diesen Baum abgelegt wird (siehe SortableListOptions.overDropAnimation).

modifiers?
Modifier[]Wert · Ref · Getter

Modifier für Drags der Zeilen dieses Baums, angewendet nach den modifiers des Providers (die eigenen modifiers einer Zeile gewinnen): z. B. [restrictToVerticalAxis]. Wird beim Start des Drags gelesen. Auch mit gesperrter Achse wird verschachtelt: Die Tiefe ergibt sich dann aus dem Hovern über der Mitte einer Zeile.

axis?
'x' | 'y'Wert · Ref · Getter

Beschränkt Drags der Zeilen dieses Baums auf eine Achse (das eigene axis einer Zeile gewinnt), nach den Modifiern. Mit 'y' lassen sich Zeilen weiterhin verschachteln: Die Tiefe ergibt sich dann aus dem Hovern über der Mitte einer Zeile. Wird beim Start des Drags gelesen.

group?
string | SortableGroupOptions<T>

Listen und Bäume mit demselben Gruppennamen tauschen Elemente aus. Standard: eine eigene Gruppe. Wird einmal gelesen.

acceptMode?
AcceptModeWert · Ref · Getter

Multi-Drag von Elementen mehrerer Typen: 'all' (Standard) oder 'some' müssen angenommen werden (group.put).

indentation?
numberWert · Ref · Getter

Pixel horizontaler Versatz pro Tiefenebene. Standard 24.

nesting?
TreeNestingWert · Ref · Getter

Wie die Tiefe gewählt wird: horizontaler Versatz, Hovern über der Mitte einer Zeile oder beides (Standard).

placeholder?
SortablePlaceholderWert · Ref · Getter

'item' (Standard): Der gezogene Knoten bewegt sich in seiner projizierten Tiefe durch die Zeilen. 'indicator': Der Baum bewegt sich nicht; indicator (am Baum und am makeSortableItem jeder Zeile) sagt, wohin der Drop geht, mit seiner depth und seinem parentKey, und du zeichnest die Linie. Ein Drop außerhalb bricht dann ab.

maxDepth?
numberWert · Ref · Getter

Größte erlaubte Tiefe (Wurzeln sind 0). Die eigenen Nachkommen der gezogenen Knoten zählen mit.

canNest?
(node: T, parent: T) => boolean

Ob node unter parent darf; ein Multi-Drag fragt für jeden gezogenen Knoten.

collapsed?
ReadonlySet<Key>Wert · Ref · Getter

Schlüssel der Knoten, deren Kinder verborgen sind.

clone?
(node: T) => T

Erstellt Kopien (group.pull: 'clone', die Modifier-Taste zum Kopieren). Zum Kopieren erforderlich. Gib die Kopie mit ihrem ganzen Teilbaum zurück: Ein kopierter Ordner behält seine Kinder. Die Kopie und jeder ihrer Nachkommen brauchen eigene Schlüssel (gelesen mit getKey), wie jeder Knoten eines Baums.

createItem?
(active: Active) => T

Nimmt einfache ziehbare Elemente von außen an: erstellt den einzufügenden Knoten, an der projizierten Position und Tiefe (canNest und maxDepth gelten für ihn). Mit der Tastatur holt ein Pfeil in Richtung des Baums das ziehbare Element herein, auf Höhe der Zeile, vor der es eingefügt wird, und die Pfeiltasten bewegen den Knoten dann wie jeden anderen. Bei einem Drag von außerhalb der Seite (external) wird es zweimal gefragt, während er gehalten wird und beim Drop (siehe createItem der Liste); ein Ordnerknoten mit einem Kind pro Datei fasst mehrere Dateien.

external?
ExternalAcceptWert · Ref · Getter

Nimmt Drags von außerhalb der Seite an: Dateien, Links, Text (siehe ExternalAccept), mit createItem. Knoten seiner Gruppe, die aus einem anderen Fenster der App hereingezogen werden, kommen als sie selbst hinein. Ein Wert, ein Ref oder ein Getter, live gelesen.

dropOutside?
DropOutsideWert · Ref · Getter

Ein Drop außerhalb aller Ziele: die Knoten dort behalten, wo der Platzhalter ist, abbrechen oder sie entfernen. Standard 'placeholder' ('cancel' mit placeholder: 'indicator'). Wird beim Drop gelesen.

animation?
LayoutAnimationWert · Ref

FLIP-Animation dieses Baums; Standard: animation des Providers. Ein Wert oder ein Ref (eine Funktion ist eine eigene Animation).

animateChanges?
AutoAnimationWert · Ref · Getter

Wie bei SortableListOptions, für die sichtbaren Zeilen: hinzugefügte, entfernte oder verschobene Knoten und die Zeilen, die ein Knoten beim Auf- oder Zuklappen zeigt oder verbirgt (collapsed).

animateSize?
booleanWert · Ref · Getter

Die eigene Größe des Baums folgt seinen Zeilen, wie die einer Liste (animateSize). Standard true.

autoScroll?
boolean | AutoScrollOptionsWert · Ref · Getter

Überschreibt autoScroll des Providers für den Scroll-Container dieses Baums. Wird beim Start des Drags gelesen.

dropzone?
MaybeElementRef

Wie bei SortableListOptions: das Element, das Drops für den Baum annimmt, standardmäßig das Element des Baums selbst.

disabled?
booleanWert · Ref · Getter

true: Seine Zeilen können nicht gezogen werden, und er nimmt keine Elemente an.

onBeforeDrop?
( event: SortableTreeDropEvent<T>, ) => MaybePromise<BeforeDropResult>

Wie bei SortableListOptions.

onDrop?
(event: SortableTreeDropEvent<T>) => void

Wie bei SortableListOptions: vor dem Schreiben, das event.preventDefault() überspringt.

Rückgabe

Was makeSortableTree zurückgibt.

id
Key

Die ID des Baums: die Option id oder die dafür erzeugte.

items
ComputedRef<FlatNode<T>[]>

Sichtbare Knoten in Entwurfsreihenfolge; der aktive Knoten trägt seine projizierte Tiefe.

projected
ComputedRef<TreeProjection | null>

Wo der aktive Knoten landen würde, null, wenn er nicht in diesem Baum ist.

indicator
ComputedRef<SortableIndicator | null>

Indikator-Modus: wohin der Drop geht, mit seiner depth und seinem parentKey; null, wenn nicht hier.

isOver
ComputedRef<boolean>

Ein Drag ist über dem Baum.

isAccepting
ComputedRef<boolean>

Etwas wird gezogen, und dieser Baum nimmt es an.

activeKey
ComputedRef<Key | null>

Die Zeile, die ein Virtualizer gemountet lassen muss: der Slot, solange er in diesem Baum ist (der gezogene Knoten, der ausgewählte Knoten, in dem der gegriffene mitfährt, eine Kopie, ein erstellter Knoten), sonst der gezogene Knoten.

activeIndex
ComputedRef<number>

Index von activeKey in items, -1, wenn er nicht hier ist.

activeSize
ComputedRef<Size | null>

Größe der gezogenen Zeile beim Start des Drags.

captureLayout
() => void

Animiert Layoutänderungen, die nicht die Bibliothek verursacht hat (z. B. ein erneutes Messen durch einen Virtualizer).

Flache Knoten

Ein sichtbarer Knoten eines Baums, wie items des Baums sie auflistet: Rendere sie der Reihe nach, eingerückt nach depth.

key
Key

Der Schlüssel des Knotens (getKey).

item
T

Dein Knoten.

depth
number

Seine Tiefe: Wurzeln haben 0. Der gezogene Knoten hat seine projizierte Tiefe.

parentKey
Key | null

Schlüssel seines Elternknotens; null bei einer Wurzel.

index
number

Index unter den Geschwistern.

hasChildren
boolean

Er hat Kinder, angezeigt oder nicht.

collapsed
boolean

Seine Kinder sind ausgeblendet (sein Schlüssel ist in collapsed).

Projektion

Wo der gezogene Knoten in einem Baum landen würde.

depth
number

Die Tiefe, die er bekäme (Wurzeln haben 0).

parentKey
Key | null

Der Knoten, unter den er käme; null auf der Wurzelebene.

Wie ein Drag im Baum seine Tiefe wählt: 'offset', danach, wie weit er sich seitlich bewegt (indentation pro Ebene); 'hover', durch Hovern über der Mitte einer Zeile, die ihn als Kind aufnimmt; 'both'.

type TreeNesting = 'offset' | 'hover' | 'both'

Das Drop-Event

Drop-Event eines Baums. index ist die Position unter den Geschwistern unter parentKey (from: vor der Verschiebung; to: danach, wobei der Knoten bereits von seinem alten Platz entfernt ist). from.parentKey ist null für Wurzelknoten und für Elemente aus einer anderen Liste. Ein Multi-Drag verschiebt keys (jeden mit seinem Teilbaum) nebeneinander: from ist, wo der Knoten war, der den Drag anführt (der gegriffene oder der ausgewählte Knoten, in dem er mitfährt), to, wo der erste von ihnen landet. Eine Kopie (mode: 'copy') lässt die Knoten, wo sie sind, und fügt items ein, ihre Kopien; ein einfaches ziehbares Element (mode: 'insert') den Knoten, den createItem erstellt hat.

from
{ list: Key | null; index: number; parentKey: Key | null }

Wo der Knoten war, der den Drag anführt: sein Baum, sein Index unter seinen Geschwistern, sein Elternknoten.

to
{ list: Key; index: number; parentKey: Key | null }

Wo der erste abgelegte Knoten landet: sein Baum, sein Index unter seinen neuen Geschwistern, sein neuer Elternknoten.