Dokumentation/API

DragPreview und Overlay-Props

Der Klon eines gezogenen Elements, für eigene Overlays, die mehrere Elemente selbst anordnen – und die Props, die Overlay-Komponenten bekommen.

Diese Seite bearbeiten

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

Live Wähle Kacheln aus und ziehe eine davon. Alt kopiert

Demo wird geladen…

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

const media = (kind: 'photo' | 'video', n: number, hue: number) => ({ id: `${kind[0]}${n}`, kind, hue });
const library = ref([
  media('photo', 1, 200),
  media('photo', 2, 30),
  media('video', 1, 280),
  media('photo', 3, 140),
  media('photo', 4, 340),
  media('video', 2, 90),
  media('photo', 5, 250),
  media('photo', 6, 10),
]);
const album = ref([media('photo', 7, 170)]);
</script>

<template>
  <DnDProvider>
    <div class="demo">
      <MediaList id="library" v-model="library" title="Library" :columns="4" />
      <!-- Takes photos only: over it with a video, `accepted` is false. -->
      <MediaList id="album" v-model="album" title="Album · photos" :columns="3" photos-only />
    </div>
  </DnDProvider>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
  gap: 14px;
  /* Room above the lists for the overlay's caption, and below for the album to grow into:
     the lists never move under the pointer. */
  min-height: 300px;
  padding-top: 24px;
}
</style>

DragPreview

const DragPreview: Component<DragPreviewProps>;

Der Standardklon eines gezogenen Elements (siehe DragPreviewProps). Eigene Overlays ordnen damit mehrere Elemente selbst an; das Standard-Overlay zeigt damit einen Multi-Drag.

StackOverlay.vue

<script setup lang="ts">
import { DragPreview, type DragItem } from '@vue-dnd-kit/core';

defineProps<{ items: DragItem[] }>();
</script>

<template>
  <div class="stack">
    <DragPreview v-for="item in items.slice(0, 3)" :id="item.id" :key="item.id" />
  </div>
</template>

Klone werden beim Aufnehmen erstellt: vom gegriffenen Element und von den anderen, die in Drop-Reihenfolge daneben liegen, so viele wie overlayPreviews des Providers (standardmäßig 5). Für jedes andere Element rendert DragPreview seinen Default-Slot oder nichts. Beim Drop fliegt jede Vorschau zu ihrem eigenen Element; bei einem Drop in eine Zone (einen Ordner, einen Papierkorb) gehen die Vorschauen eine nach der anderen hinein. Siehe den Leitfaden Das Overlay.

Props von DragPreview: der Standardklon eines gezogenen Elements, für eigene Overlays (eine overlay-Komponente oder den Slot #overlay des Providers), die mehrere Elemente selbst anordnen, z. B. <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.

Klone werden beim Aufnehmen erstellt: vom gegriffenen Element und von den anderen, die in Drop-Reihenfolge daneben liegen, so viele wie overlayPreviews des Providers (standardmäßig 5; von denen, die zu diesem Zeitpunkt gerendert sind). Für jedes andere Element rendert DragPreview seinen Default-Slot in einem DOM-Element, das class und style so annimmt wie das eines Klons, oder nichts, wenn es keinen gibt. Der Klon füllt das DOM-Element aus, das beim Aufnehmen die Größe des Elements bekommt, inline gesetzt: Ändere sie mit style (:style="{ width: '100%', height: '100%' }"), das durchgereicht wird; eine Klasse kann sie nicht überschreiben.

Bei einem sortierbaren Multi-Drag (multiple: 'group' oder 'gaps') landet die Vorschau eines anderen Elements als des gegriffenen mit dem Drop im Slot dieses Elements (bei einem Abbruch wieder auf seinem Platz), von wo auch immer das Layout sie hingesetzt hat: Mit transform gedrehte oder skalierte Wrapper werden unterwegs rückgängig gemacht, ihre Größe wird als Breite und Höhe animiert. Style die Vorschau selbst (Ecken, Schatten): Ihre Wrapper bleiben in der Box. Elemente ohne Klon werden stattdessen eingeblendet. In eine Zone (keine Liste) abgelegt, gehen die Vorschauen eine nach der anderen hinein, die Box zuletzt.

Key

ID eines gezogenen Elements: eines aus items in OverlayProps.

Overlay-Props

Was eine Overlay-Komponente (die Option overlay von ziehbaren Elementen, sortierbaren Elementen, Listen und Bäumen) und der Slot #overlay des Providers bekommen.

Was das Overlay zeigt: die Props des Slots #overlay des Providers und von Overlay-Komponenten (Option overlay von ziehbaren Elementen, sortierbaren Elementen, Listen und Bäumen).

active

Active

Der Drag.

items

DragItem[]

Alle gezogenen Elemente, das primäre zuerst: ein Overlay für den ganzen Multi-Drag.

over

Over | null

Das Drop-Ziel unter dem Drag. Während ein entschiedener Drop animiert wird, das Ziel, auf dem er landet (so, wie es beim Drop war); null, während ein abgebrochener Drag zurückfliegt.

accepted

boolean

Ob over die gezogenen Elemente annimmt; false, wenn der Drag über nichts ist.

status

DnDStatus

'dragging', dann 'dropping', während das Overlay landet (oder zurückfliegt).

mode

DragMode

Was ein Drop jetzt bewirken würde (siehe DnDEvent.mode): z. B. ein Plus zeigen, solange er kopiert.

DropDestination | null

Wohin ein Drop die gezogenen Elemente jetzt legen würde, in einer sortierbaren Liste oder einem Baum: z. B. um das Overlay nach dem Ordner zu färben, in den ein Drag im Baum käme. Außerhalb aller Ziele ist es der Platz des Slots, an dem dropOutside: 'placeholder' (der Standard) sie lässt. null, wenn der Drop sie in keine Liste legen würde: über einem einfachen Drop-Ziel, über einer Liste, die sie ablehnt, außerhalb mit dropOutside: 'cancel' oder 'remove'. Während ein entschiedener Drop animiert wird, der Platz, auf dem er landet.

Props einer Overlay-Komponente, für defineProps<OverlayProps>().

Die Komponente rendert innerhalb der Overlay-Box, die der Größe des Slots folgt (overlayFit: 'slot') und diese beim Drop animiert. Gib dem Root-Element width: 100% (und height: 100%), damit es dieser Größe folgt; mit einer festen Größe behält die Komponente ihre eigene.

type OverlayProps = OverlaySlotProps

Wohin ein Drop die gezogenen Elemente legen würde: ein Platz in einer sortierbaren Liste oder einem Baum, so wie es das to des Drop-Events sagen wird (die Prop to des Overlays, live).

list

Key

ID der Liste oder des Baums.

index

number

Index, den die gezogenen Elemente einnehmen: in der Liste oder, in einem Baum, unter den Geschwistern unter parentKey.

parentKey?

Key | null

Bäume: der Knoten, unter den sie kommen; null auf der Wurzelebene.

depth?

number

Bäume: die Tiefe, in die sie kommen (Wurzeln sind 0).