Documentation/API
makeDroppable
Fait d'un élément une cible de dépôt, avec des règles pour ce qu'elle accepte et des hooks pour le dépôt.
Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais
function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;Fait d'un élément une cible de dépôt.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
Voir Glisser-déposer et Décider d'un dépôt.
Chargement de la démo…
<script setup lang="ts">
import { reactive } from 'vue';
import { DnDProvider, type Key } from '@vue-dnd-kit/core';
import FileChip from './FileChip.vue';
import Zone from './Zone.vue';
import { FILES } from './files';
/** Which zone each file is in. */
const where = reactive<Record<string, string>>(Object.fromEntries(FILES.map((file) => [file.id, 'desk'])));
const filesIn = (zone: string) => FILES.filter((file) => where[file.id] === zone);
const move = (zone: string, file: Key) => (where[String(file)] = zone);
</script>
<template>
<DnDProvider>
<div class="zones">
<Zone title="Desktop" rule="takes anything" class="desk" @drop="move('desk', $event)">
<FileChip v-for="file in filesIn('desk')" :key="file.id" :file="file" />
</Zone>
<Zone title="Images" rule="accept: 'image'" accept="image" @drop="move('images', $event)">
<FileChip v-for="file in filesIn('images')" :key="file.id" :file="file" />
</Zone>
<Zone title="Media" rule="accept: ['image', 'audio']" :accept="['image', 'audio']" @drop="move('media', $event)">
<FileChip v-for="file in filesIn('media')" :key="file.id" :file="file" />
</Zone>
<Zone title="Archive" rule="disabled: true" disabled @drop="move('archive', $event)" />
</div>
</DnDProvider>
</template>
<style scoped>
.zones {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(720px, 100%);
}
.desk {
grid-column: 1 / -1;
}
@media (max-width: 560px) {
.zones {
grid-template-columns: minmax(0, 1fr);
}
}
</style>Options
Options de makeDroppable.
Dépôt dans un item. Une cible de dépôt sur l'élément d'un item triable (ou à l'intérieur) fonctionne comme partout ailleurs, avec une règle tant que la liste de cet item trierait le glissement : elle ne compte que quand le pointeur est au milieu de l'item (de 25 à 75 % le long de l'axe de la liste ; x dans les grilles), là où le dépôt va dans la cible et où la liste ne bouge pas pour lui. Près des bords de l'item, la liste trie comme d'habitude. Une cible dont l'accept refuse le glissement est ignorée, et la liste trie au-dessus de l'item comme au-dessus de n'importe quel autre (inutile de la désactiver). Le clavier s'arrête sur une telle cible avant de dépasser son item. Un glissement ne cible jamais ce qu'il transporte : aucune cible dans (ou sur) un item glissé, ni dans l'emplacement où l'un d'eux atterrit. Pour retirer les items de leur liste dans onDrop, appelez e.source.remove().
Chaque option sauf les callbacks accepte une valeur, une ref ou un getter (accept, overOverlay, overDropAnimation : une valeur ou une ref) et est lue en direct, pendant qu'un glissement cherche sa cible.
Keyvaleur · ref · getterPar défaut : useId(), stable entre le rendu serveur et le rendu client.
TDatavaleur · ref · getterTout ce qu'il y a à dire sur la cible : les événements le transportent dans over.data.
stringvaleur · ref · getterLe nom que les gens lui donnent : les textes pour les lecteurs d'écran le disent à la place de l'id (over Trash) ; les événements le transportent dans over.label.
AcceptRulevaleur · refCe que cette cible accepte. À l'intérieur d'un item triable, une cible qui refuse le glissement laisse la liste trier au-dessus d'elle. Une valeur ou une ref : une fonction est une règle.
AcceptModevaleur · ref · getter'all' par défaut.
booleanvaleur · ref · gettertrue : les glissements passent au-dessus comme si elle n'existait pas.
numbervaleur · ref · getterLa plus haute l'emporte quand des cibles se chevauchent sans être imbriquées (0 par défaut). Les items triables l'emportent sur les conteneurs.
Componentvaleur · refCe que montre l'overlay pendant qu'un glissement que cette cible accepte la survole : un composant qui reçoit OverlayProps, rendu à la place de l'overlay propre au glissement (le composant de l'item glissé, le slot du provider ou le clone), qu'il reçoit comme slot par défaut pour l'envelopper ou le laisser de côté (<slot />). Il reste pendant que le dépôt atterrit ici. Les glissements sans overlay (overlay: false) n'en ont toujours pas. Une valeur ou une ref, lue en direct ; le changement de composant s'anime avec l'overlayTransition du provider. (Sur les éléments déplaçables, les items et les listes, overlay est l'overlay propre au glissement ; les listes triables et les arbres acceptent aussi celle-ci, sous le nom overOverlay.)
DropAnimationvaleur · refComment l'overlay atterrit quand il est déposé ici, à la place de la dropAnimation de l'item glissé et de celle du provider : false le laisse là où il a été déposé (l'animation propre à un composant d'overlay, une éclaboussure, s'y joue), une fonction l'anime. Une valeur ou une ref, lue au dépôt.
(event: DnDEvent) => voidUn glissement est arrivé au-dessus de cette cible, qu'elle l'accepte ou non (event.over.accepted).
(event: DnDEvent) => voidLe glissement a quitté cette cible.
(event: DnDEvent) => MaybePromise<BeforeDropResult>Consulté avant qu'un dépôt sur cette cible n'aboutisse, après le onBeforeDrop des moniteurs, si elle accepte le glissement (voir BeforeDropResult). Peut être asynchrone : l'overlay attend là où il a été déposé. Une erreur refuse le dépôt.
(event: DnDEndEvent) => voidUn dépôt sur cette cible a abouti : faites ce qu'il signifie (déplacer l'item, téléverser le fichier). Quand un onBeforeDrop n'a accepté qu'une partie des items glissés, event.accepted contient leurs ids et event.rejected les autres, qui reviennent à leur place ; active reste le glissement entier.
ExternalAcceptvaleur · ref · getterAccepte les glissements venus de l'extérieur de la page : des fichiers depuis le bureau, un lien ou du texte depuis une autre application ou un autre onglet (le glisser-déposer du navigateur). Ils fonctionnent comme les glissements de la bibliothèque (isOver, isAccepting, les événements), et e.external contient leurs données au dépôt. Les cibles sans external les ignorent. Une valeur, une ref ou un getter, lu en direct.
Valeur de retour
Ce que renvoie makeDroppable.
ComputedRef<Key>L'id de la cible : l'option id, ou celui créé pour elle.
ComputedRef<boolean>Un glissement est au-dessus d'elle (un glissement venu de l'extérieur de la page aussi, avec external).
ComputedRef<boolean>Quelque chose est en cours de glissement et cette cible l'accepte.
ComputedRef<Placement | null>Position du pointeur par rapport aux moitiés de la cible pendant qu'elle est survolée.
Règles d'acceptation
'*' ou une règle omise accepte tout. Les items sans type satisfont n'importe quelle règle sous forme de chaîne (comme groups: [] en v2).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)Ce avec quoi une règle accept sous forme de fonction est appelée.
'all' : chaque item glissé doit correspondre ; 'some' : au moins un (les autres peuvent être refusés dans onBeforeDrop).
type AcceptMode = 'all' | 'some'Depuis l'extérieur de la page
Ce que external accepte des glissements venus de l'extérieur de la page, et ce que transporte
un tel glissement (e.external). Voir fichiers et autres applications.
Ce qu'une cible de dépôt, une liste ou un arbre accepte des glissements venus de l'extérieur de la page : des fichiers depuis le bureau, un lien ou du texte depuis une autre application ou un autre onglet (external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)Des fichiers : true les accepte tous. Ou comme pour <input accept> : des types MIME (image/*, application/pdf) et des extensions (.md), dans une chaîne séparée par des virgules ou une liste ; les extensions sont vérifiées au dépôt. Ou une fonction interrogée pour chaque fichier (false le refuse). Les dossiers ne sont jamais acceptés.
booleanPlusieurs fichiers à la fois (true par défaut) ; false refuse un glissement de plus d'un fichier.
booleanDes liens (text/uri-list) : une adresse glissée depuis un autre onglet, un lien d'une page.
booleanDu texte brut (text/plain) : une sélection glissée depuis une autre application.
readonly string[]D'autres types MIME acceptés, exactement tels que les autres applications les proposent.
Un glissement venu de l'extérieur de la page (Active.external, DnDEvent.external). Pendant qu'il est tenu, le navigateur dit ce qu'il transporte, pas les données : les fichiers, les liens et le texte arrivent au dépôt (ready).
readonly string[]Les types MIME qu'il propose (Files, text/uri-list, text/plain, ceux propres à une application).
readonly string[]Les types MIME de ses fichiers, un par fichier ('' quand le navigateur ne peut pas le dire).
readonly File[]Au dépôt : les fichiers que la cible accepte (sans les dossiers ni les fichiers refusés).
readonly string[]Au dépôt : ses liens (text/uri-list).
stringAu dépôt : son texte brut.
stringAu dépôt : son HTML.
(type: string) => stringAu dépôt : les données de n'importe quel type qu'il propose ('' avant, et pour un type qu'il ne propose pas).
booleanIl a été déposé : les données ci-dessus sont là.
stringDes items de la bibliothèque glissés depuis une autre fenêtre de l'application (native) : le nom de leur groupe triable. Les listes de ce groupe les acceptent comme s'ils venaient de l'une de leurs propres listes ; active.items les contient.
Un fichier d'un glissement venu de l'extérieur, tel que ExternalAccept.files est interrogé à son sujet. Tant que les fichiers sont tenus au-dessus de la page, le navigateur ne donne que leurs types : name et size arrivent au dépôt.