vue-dnd-kit

Dokumentation/API

Allgemeine Typen

Die kleinen Typen, auf die jede API-Seite verweist – Schlüssel, Koordinaten, Rechtecke, Element-Refs und reaktive Optionen.

Diese Seite bearbeiten

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

Reaktive Optionen

Die meisten Optionen nehmen einen Wert, ein Ref oder einen Getter entgegen und werden gelesen, wenn sie gebraucht werden: Eine Änderung gilt spätestens ab dem nächsten Drag. Die Tabellen kennzeichnen sie mit Wert · Ref · Getter.

Ein Wert, ein Getter oder ein beliebiges Ref (beschreibbar, shallow, computed, readonly – z. B. aus useTemplateRef), das die Bibliothek nur liest. Anders als Vues MaybeRefOrGetter akzeptiert er Ref<string>, wo string | number erwartet wird.

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

Ein Wert oder ein beliebiges Ref, für Optionen, bei denen eine Funktion ein eigenständiger Wert ist (eine Overlay-Komponente, eine Annahmeregel, eine eigene Animation), sodass ein Getter nicht davon zu unterscheiden wäre. Halte Komponenten in einem shallowRef (oder einem computed): Vue darf sie nicht reaktiv machen.

type MaybeReadonlyRef = T | Readonly<Ref<T>>

Elemente

Das Element, mit dem ein Composable arbeitet (makeDraggable(target)): das Element, ein Template-Ref (useTemplateRef) oder ein Getter. Es darf sich ändern (ein v-if): Die Bibliothek folgt ihm.

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

Ein Element: ein HTML- oder SVG-Element oder eine Komponenteninstanz (ihr Wurzelelement, $el), so wie ein Template-Ref sie liefert. null oder undefined, solange es keins gibt (noch nicht gemountet).

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

Schlüssel und Geometrie

Eine ID oder ein Schlüssel: eines ziehbaren Elements, eines Drop-Ziels, einer Liste, eines Elements einer Liste.

type Key = string | number

Ein Punkt oder ein Versatz, in px: eine Position ab der oberen linken Ecke des Viewports oder ein Versatz von dort, wo der Drag begann (delta, transform).

x
number

Horizontal, nach rechts wachsend.

y
number

Vertikal, nach unten wachsend.

Eine Breite und eine Höhe, in px.

width
number

Breite in px.

height
number

Höhe in px.

Eine Box in px, in Viewport-Koordinaten, wie getBoundingClientRect() sie liefert.

top
number

Seine Oberkante, vom oberen Rand des Viewports aus.

left
number

Seine linke Kante, vom linken Rand des Viewports aus.

width
number

Seine Breite.

height
number

Seine Höhe.

right
number

Seine rechte Kante, vom linken Rand des Viewports aus: left + width.

bottom
number

Seine Unterkante, vom oberen Rand des Viewports aus: top + height.

Status

Was der Provider gerade tut:

  • 'idle': nichts;
  • 'activating': Ein Drücken wartet auf seine Aktivierungsbedingung (eine Distanz, ein langes Drücken);
  • 'dragging': Ein Drag läuft;
  • 'dropping': Über einen Drop wird entschieden (ein asynchrones onBeforeDrop), oder ein Overlay landet noch;
  • 'selecting': Ein Auswahlbereich zeichnet seinen Rahmen.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

Wie sich ein Drag bewegt, egal welcher Sensor ihn steuert (SensorActivation.type): 'pointer' folgt Punkten, 'keyboard' bewegt sich von Element zu Element.

type SensorType = 'pointer' | 'keyboard'

Die Art des Zeigers, der gedrückt hat (PointerEvent.pointerType): Die Aktivierung wird pro Art eingestellt.

type PointerKind = 'mouse' | 'touch' | 'pen'

Ein Wert oder ein Promise davon: was ein Hook zurückgibt, der asynchron sein darf (onBeforeDrop).

type MaybePromise = T | Promise<T>