Dokumentation/API

Events

Was Drag-Events enthalten – den aktiven Drag, das Ziel, den Zeiger, wo sich das Element befindet – und was onBeforeDrop antwortet.

Diese Seite bearbeiten

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

Monitore (useDnDMonitor), die Events des Providers und die Hooks von Drop-Zonen bekommen ein DnDEvent; onDragEnd bekommt ein DnDEndEvent. Sortierbare Listen und Bäume übergeben eigene Drop-Events (SortableDropEvent, SortableTreeDropEvent) an ihre onBeforeDrop und onDrop.

Live Ziehe eine Aufgabe, dann wähle ein Event aus, um es zu lesen

Demo wird geladen…

<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import { describe, type LoggedEvent } from './describe';
import TaskColumn from './TaskColumn.vue';
import EventInspector from './EventInspector.vue';

const todo = ref([
  { id: 'docs', title: 'Write docs' },
  { id: 'bug', title: 'Fix #42' },
]);
const done = ref([{ id: 'ship', title: 'Ship v3' }]);

// Every event of the drag, described when it fires. A new drag starts a new log;
// moves fire every frame, so they share one entry, which keeps the latest.
const events = ref<LoggedEvent[]>([]);
let count = 0;
const record = (name: string, type: string, payload: unknown) => {
  if (name === 'onDragStart') events.value = [];
  const lines = describe(type, payload);
  const move = name === 'onDragMove' && events.value.find((event) => event.name === name);
  if (move) Object.assign(move, { lines, count: move.count + 1 });
  else events.value.push({ id: ++count, name, type, lines, count: 1 });
};
</script>

<template>
  <DnDProvider>
    <div class="demo">
      <div class="columns">
        <TaskColumn id="todo" v-model="todo" :record="record" />
        <TaskColumn id="done" v-model="done" :record="record" />
      </div>
      <EventInspector :events="events" :record="record" />
    </div>
  </DnDProvider>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

.columns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 168px;
}
</style>

DnDEvent

Was Drag-Events mitführen: Monitore, die Events des Providers und die Hooks von Drop-Zielen erhalten es.

active

Active<T>

Der Drag.

over

Over | null

Das Drop-Ziel unter dem Drag; null über nichts.

pointer

Coordinates

Zeiger in Viewport-Koordinaten, nach den Modifiern.

delta

Coordinates

Versatz seit dem Start des Drags, nach den Modifiern.

position

Coordinates | null

Wo die linke obere Ecke der gezogenen Box in over liegt, gemessen von dessen Padding-Kante und mit dessen Scrollposition: das left/top, das ein absolut positioniertes Element dorthin setzt, wo es abgelegt wurde (eine Notiz auf einem Board). null über nichts. Bezieht sich auf die Overlay-Box oder, mit overlay: false, auf das Element selbst.

mode

DragMode

Was ein Drop tun würde: 'move', 'copy' (pull: 'clone' einer Liste oder die Kopier-Taste, gehalten über Elementen, deren Liste clone kann), 'swap' oder 'insert'. Ein einfaches Drop-Ziel liest es, um zu kopieren statt zu verschieben.

source?

DragSource

Vorhanden, wenn die gezogenen Elemente aus einer sortierbaren Liste kommen.

external?

ExternalData

Ein Drag von außerhalb der Seite: was er trägt (active.external). Seine Daten kommen beim Drop.

DnDEndEvent

Was onDragEnd (und das onDrop des Ziels) erhält: das Event des Drops und wie er ausgegangen ist.

dropped

boolean

False, wenn der Drag außerhalb aller Drop-Ziele geendet hat.

accepted

Key[]

Von onBeforeDrop angenommene IDs (alle gezogenen IDs, sofern keine Teilmenge zurückgegeben wurde).

rejected

Key[]

Die anderen gezogenen IDs: onBeforeDrop hat sie ausgelassen, und sie fliegen zurück. Leer, wenn es alle angenommen hat.

droppedOutside?

'move' | 'copy' | 'link'

Ein Drag aus der Seite hinaus (native), der woanders abgelegt wurde: was dieser Ort damit gemacht hat. 'move' nimmt die Elemente hier aus ihrer sortierbaren Liste; 'copy' und 'link' lassen sie dort.

Antworten von onBeforeDrop

Was onBeforeDrop entscheidet:

'accept' (oder true oder nichts): Der Drop wird ausgeführt;
'reject' (oder false): kein Drop, die Elemente fliegen zurück;
eine Liste von IDs: Nur diese Elemente werden angenommen, die anderen fliegen zurück;
'continue': kein Drop, und der Drag geht weiter. Mit einem Zeiger folgt das Element ihm wieder (ohne gedrückte Taste), und das nächste Loslassen – also ein Klick – legt es ab; ein Touch nimmt es wieder auf; die Tastatur bewegt es wie zuvor. Escape bricht den Drag ab. Der Drop fragt onBeforeDrop erneut.

type BeforeDropResult = boolean | void | Key[] | 'accept' | 'reject' | 'continue'

Siehe Über einen Drop entscheiden.

Der aktive Drag

Der laufende Drag: das Element, von dem er ausging, und jedes Element, das er trägt.

Key

ID des Elements, bei dem der Drag begonnen hat.

ids

Key[]

Alle gezogenen IDs, die primäre zuerst (Multi-Drag).

items

DragItem<T>[]

Jedes gezogene Element, das primäre zuerst.

data

unknown

Die data des Elements, von dem der Drag ausging.

label?

string

Das label des Elements, an dem der Drag gestartet ist, der lesbare Name.

type

string[]

Der normalisierte type des Elements, von dem der Drag ausging; leer bedeutet, dass es zu jedem Drop-Ziel passt.

element

HTMLElement

Element, bei dem der Drag begonnen hat. Es kann vom DOM getrennt werden (virtuelle Listen, Verschieben zwischen Listen).

rect

Rect

Layout-Rechteck von element beim Start des Drags.

sensor

SensorType

Wie sich der Drag bewegt: 'pointer' folgt Punkten, 'keyboard' springt von Element zu Element (SensorActivation.type).

external?

ExternalData

Ein Drag von außerhalb der Seite (Dateien, ein Link, Text oder Elemente aus einem anderen Fenster der App): was er trägt. Seine items werden für ihn erstellt (element ist ein Platzhalter).

native?

boolean

Der eigene Drag des Browsers (native oder einer von außerhalb): Der Browser zeichnet das gezogene Bild, und es gibt kein Overlay.

Ein gezogenes Element: das, von dem der Drag ausging, oder ein weiteres eines Multi-Drags.

Key

ID seines ziehbaren Elements (der Schlüssel eines sortierbaren Elements).

item?

T

Objekt des Elements, wenn der Drag aus einer sortierbaren Liste kommt.

data

unknown

Seine Option data.

label?

string

Sein label, der lesbare Name.

type

string[]

Normalisierter type des ziehbaren Elements; leer bedeutet, dass es zu jedem Drop-Ziel passt.

Das Ziel

Das Drop-Ziel unter dem Drag.

Key

ID des Drop-Ziels.

data

unknown

Die Option data des Ziels.

label?

string

Das label des Ziels, der lesbare Name.

element

HTMLElement

Das Element des Ziels.

rect

Rect

Das Rechteck von element, während des Drags gemessen.

accepted

boolean

Ob die accept-Regel des Ziels die gezogenen Elemente annimmt.

Die Quelle

Woher die gezogenen Elemente kommen, wenn das eine sortierbare Liste ist.

list

Key

Sortierbare Liste, aus der die gezogenen Elemente kommen.

remove

() => void

Entfernt die gezogenen Elemente aus ihrer Liste (Papierkorb-Zonen).

Was ein Drop bewirkt: 'move', 'copy' (die Elemente bleiben, Kopien von ihnen werden eingefügt), 'swap' (behavior: 'swap': zwei Elemente tauschen die Plätze) oder 'insert' (ein einfaches ziehbares Element kommt als das Element in eine Liste, das sein createItem erzeugt hat).

type DragMode = 'move' | 'copy' | 'swap' | 'insert'