vue-dnd-kit

Dokumentation/API

makeSortableItem

Registriert eine Zeile einer sortierbaren Liste oder eines Baums – sie lässt sich ziehen, macht Platz und landet in ihrem Slot.

Diese Seite bearbeiten

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

function makeSortableItem<TData = unknown>(  target: MaybeElementRef,  options: SortableItemOptions<TData>,): SortableItemReturn;

Macht ein Element zu einer Zeile einer sortierbaren Liste oder eines Baums: Sie wird gezogen, macht Platz und landet in ihrem Slot. Rufe es in einer Komponente auf, die innerhalb derjenigen gerendert wird, die makeSortableList (oder makeSortableTree) aufgerufen hat; von mehreren dort erstellten Listen gehört die Zeile zur innersten, deren DOM-Element sie enthält. Identifiziere die Zeile mit item (Schlüssel aus getKey der Liste, standardmäßig item.id) oder id.

const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });

Siehe Sortierbare Listen.

Live

Demo wird geladen…

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

<template>
  <DnDProvider>
    <TodoList />
  </DnDProvider>
</template>

Optionen

Übergib id oder item (id gewinnt, wenn beide angegeben sind). Sortierbare Schlüssel müssen aus den Daten kommen: Eine automatische ID würde sich ändern, sobald die Komponente neu erstellt wird (in eine andere Liste verschoben, von einer virtuellen Liste wiederverwendet), und der Drag würde das Element verlieren.

Optionen außer canDrag nehmen einen Wert, ein Ref oder einen Getter entgegen (overlay, dropAnimation: einen Wert oder ein Ref) und bedeuten dasselbe wie bei makeDraggable. Es gibt kein keyboardMode: Die Tastatur bewegt ein sortierbares Element von Slot zu Slot.

id?
KeyWert · Ref · Getter

Schlüssel des Elements in seiner Liste. Ein Getter hält ihn in virtuellen Listen aktuell.

item?
unknownWert · Ref · Getter

Das Datenelement, das dieses Element rendert, z. B. () => props.task. Sein Schlüssel kommt aus getKey der zugehörigen Liste (oder des Baums), standardmäßig item.id.

overlay?
ComponentWert · Ref

Overlay-Komponente für dieses Element; gewinnt gegen overlay der Liste. Ein mitten im Drag umgeschaltetes Ref tauscht sie sofort.

dropAnimation?
DropAnimationWert · Ref

Wie das Overlay landet, wenn ein Drag dieses Elements endet; gewinnt gegen die dropAnimation der Liste. Wird beim Drop gelesen.

modifiers?
Modifier[]Wert · Ref · Getter

Modifier für Drags dieses Elements, nach denen des Providers; gewinnen gegen modifiers der Liste.

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

Beschränkt Drags dieses Elements auf eine Achse ('x', 'y'); gewinnt gegen axis der Liste.

handle?
MaybeElement | stringWert · Ref · Getter

Element oder Selektor innerhalb des Elements, der den Drag startet (und die Attribute bekommt).

disabled?
booleanWert · Ref · Getter

true: Das Element kann nicht gezogen werden (wie jedes Element einer deaktivierten Liste).

type?
string | string[]Wert · Ref · Getter

Sein Typ oder seine Typen, für group.put-Regeln und das accept von Drop-Zielen. Standard: der Name der Gruppe seiner Liste.

data?
TDataWert · Ref · Getter

Alles, was der Drag mitführen soll: Events und Drop-Ziele lesen es als active.data.

label?
stringWert · Ref · Getter

Der lesbare Name des Elements: Screenreader-Texte nennen ihn statt seines Schlüssels (Picked up Tomato at position 2 of 5 in Garden). Events tragen ihn als active.label und in items.

activation?
ActivationOptionsWert · Ref · Getter

Überschreibt activation seiner Liste (oder seines Baums) und des Providers. Wird gelesen, wenn ein Druck beginnt.

canDrag?
(event: PointerEvent | KeyboardEvent) => boolean

Zusätzliche Bedingung, z. B. nur ziehen, solange eine Taste gedrückt ist.

attributes?
booleanWert · Ref · Getter

Setzt role-/tabindex-/aria-*-Attribute (Standard true) und überschreibt nie deine eigenen. Live: Ausschalten entfernt, was die Bibliothek gesetzt hat.

native?
boolean | NativeDragOptionsWert · Ref · Getter

Ein Maus-Drag des Elements ist der eigene Drag des Browsers, der die Seite verlassen kann (siehe DraggableOptions.native). Er trägt auch das Element: Die Listen seiner Gruppe in einem anderen Fenster der App nehmen es an, und wenn eine das tut, verlässt es diese Liste ('move').

Rückgabe

Was makeSortableItem zurückgibt.

isDragging
ComputedRef<boolean>

Dieses Element wird gezogen (auch true für die anderen Elemente eines Multi-Drags), oder sein Overlay landet noch.

isPlaceholder
ComputedRef<boolean>

Dieses Element ist ein Slot, in dem ein gezogenes Element landen wird: der des aktiven Elements und im Multi-Drag-Modus 'group' die Slots der Elemente, die mit ihm wandern.

selected
WritableComputedRef<boolean>

Es ist in der Auswahl des Providers: Ein Drag eines ausgewählten Elements trägt sie alle. Setze den Wert, um es aus- oder abzuwählen.

indicator
ComputedRef<SortableIndicator | null>

Indikator-Modus: indicator der Liste, solange er an diesem Element hängt, sonst null. side sagt, wo die Linie erscheint; in Bäumen sagen depth und parentKey, wo der Drop landet (side: 'inside': in diesem Element).

index
ComputedRef<number>

Index im gerenderten Entwurf, -1, wenn unbekannt.