Documentation/API

DragPreview et props de l'overlay

Le clone d'un item glissé, pour les overlays personnalisés qui disposent eux-mêmes plusieurs items — et les props que reçoivent les composants d'overlay.

Modifier cette page

Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais

Live Sélectionnez des tuiles, faites-en glisser une. Alt copie

Chargement de la démo…

<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>;

Le clone par défaut d'un item glissé (voir DragPreviewProps). Les overlays personnalisés s'en servent pour disposer eux-mêmes plusieurs items ; l'overlay par défaut s'en sert pour afficher un 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>

Les clones sont pris à la saisie : celui de l'item saisi et ceux des autres, voisins dans l'ordre du dépôt, autant que l'indique l'option overlayPreviews du provider (5 par défaut). Pour tout autre item, DragPreview rend son slot par défaut, ou rien. Au dépôt, chaque aperçu vole vers son propre item ; déposés dans une zone (un dossier, une corbeille), les aperçus y entrent l'un après l'autre. Voir le guide de l'overlay.

Props de DragPreview : le clone par défaut d'un item glissé, pour les overlays personnalisés (un composant overlay ou le slot #overlay du provider) qui disposent eux-mêmes plusieurs items, par exemple <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.

Les clones sont pris à la saisie : celui de l'item saisi et ceux des autres, voisins dans l'ordre du dépôt, autant que l'indique l'option overlayPreviews du provider (5 par défaut ; ceux qui sont rendus à ce moment-là). Pour tout autre item, DragPreview rend son slot par défaut dans un élément qui reçoit class et style comme celui d'un clone, ou rien en l'absence de slot. Le clone remplit l'élément, qui reçoit à la saisie la taille de l'item, définie en style inline : changez-la avec style (:style="{ width: '100%', height: '100%' }"), qui est transmis ; une classe ne peut pas la surcharger.

Dans un multi-drag triable (multiple: 'group' ou 'gaps'), l'aperçu d'un item autre que celui qui a été saisi atterrit avec le dépôt sur l'emplacement de cet item (et revient à sa place en cas d'annulation), depuis l'endroit où la mise en page l'a placé : les conteneurs tournés ou mis à l'échelle avec transform sont neutralisés en chemin, et sa taille s'anime en largeur et en hauteur. Stylisez l'aperçu lui-même (coins, ombre) : ses conteneurs restent dans la boîte. Les items sans clone apparaissent en fondu à la place. Déposés dans une zone (pas dans une liste), les aperçus y entrent l'un après l'autre, la boîte en dernier.

Key

Id d'un item glissé : l'un des items de OverlayProps.

Props de l'overlay

Ce que reçoivent un composant d'overlay (l'option overlay des éléments déplaçables, des items triables, des listes et des arbres) et le slot #overlay du provider.

Ce que montre l'overlay : les props du slot #overlay du provider et des composants d'overlay (option overlay des éléments déplaçables, des items triables, des listes et des arbres).

active

Active

Le glissement.

items

DragItem[]

Tous les items glissés, en commençant par l'item principal : un seul overlay pour tout le multi-drag.

over

Over | null

La cible de dépôt sous le glissement. Pendant qu'un dépôt décidé s'anime, la cible sur laquelle il atterrit (telle qu'elle était au dépôt) ; null pendant qu'un glissement annulé revient à sa place.

accepted

boolean

Si over accepte les items glissés ; false au-dessus de rien.

status

DnDStatus

'dragging', puis 'dropping' pendant que l'overlay atterrit (ou revient à sa place).

mode

DragMode

Ce que ferait un dépôt maintenant (voir DnDEvent.mode) : par exemple afficher un plus pendant une copie.

DropDestination | null

L'endroit où un dépôt mettrait maintenant les items glissés, dans une liste ou un arbre triable : par exemple pour teinter l'overlay selon le dossier dans lequel irait un glissement dans un arbre. En dehors de toute cible, c'est la place de l'emplacement, où dropOutside: 'placeholder' (la valeur par défaut) les garde. null quand le dépôt ne les mettrait dans aucune liste : au-dessus d'une cible de dépôt simple, au-dessus d'une liste qui les refuse, à l'extérieur avec dropOutside: 'cancel' ou 'remove'. Pendant l'animation d'un dépôt décidé, la place où il atterrit.

Props d'un composant d'overlay, pour defineProps<OverlayProps>().

Le composant est rendu à l'intérieur de la boîte de l'overlay, qui suit la taille de l'emplacement (overlayFit: 'slot') et l'anime au dépôt. Donnez à la racine width: 100% (et height: 100%) pour suivre cette taille ; une taille fixe garde celle du composant.

type OverlayProps = OverlaySlotProps

L'endroit où un dépôt mettrait les items glissés : une place dans une liste ou un arbre triable, comme le dira le to de l'événement de dépôt (la prop to de l'overlay, en direct).

list

Key

Id de la liste ou de l'arbre.

index

number

Index que prennent les items glissés : dans la liste, ou parmi les frères sous parentKey dans un arbre.

parentKey?

Key | null

Arbres : le nœud sous lequel ils vont ; null à la racine.

depth?

number

Arbres : la profondeur à laquelle ils vont (les racines sont à 0).