Dokumentation/API
makeDroppable
Macht ein Element zu einem Drop-Ziel, mit Regeln dafür, was es annimmt, und Hooks für den Drop.
Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen
function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;Macht ein Element zu einem Drop-Ziel.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
Siehe Drag and Drop und Über einen Drop entscheiden.
Demo wird geladen…
<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>Optionen
Optionen von makeDroppable.
Drop in ein Element. Ein Drop-Ziel auf dem DOM-Element eines sortierbaren Elements (oder darin) funktioniert wie überall sonst, mit einer Regel, solange die Liste dieses Elements den Drag sortieren würde: Es zählt nur, solange der Zeiger in der Mitte des Elements ist (25–75 % entlang der Achse der Liste; x in Rastern), wo der Drop in das Ziel geht und die Liste sich dafür nicht bewegt. Nahe den Rändern des Elements sortiert die Liste wie gewohnt. Ein Ziel, dessen accept den Drag ablehnt, wird ausgelassen, sodass die Liste über dem Element sortiert wie über jedem anderen (es muss nicht deaktiviert werden). Die Tastatur hält auf einem solchen Ziel an, bevor sie an seinem Element vorbeigeht. Ein Drag zielt nie auf das, was er trägt: kein Ziel in (oder auf) einem gezogenen Element und keins in dem Slot, in dem eines landet. Um die Elemente in onDrop aus ihrer Liste zu nehmen, rufe e.source.remove() auf.
Jede Option außer den Callbacks nimmt einen Wert, ein Ref oder einen Getter entgegen (accept, overOverlay, overDropAnimation: einen Wert oder ein Ref) und wird live gelesen, während ein Drag sein Ziel sucht.
KeyWert · Ref · GetterStandard: useId(), stabil zwischen Server- und Client-Rendering.
TDataWert · Ref · GetterAlles, was es über das Ziel zu sagen gibt: Events tragen es als over.data.
stringWert · Ref · GetterDer lesbare Name: Screenreader-Texte nennen ihn statt der ID (over Trash); Events tragen ihn als over.label.
AcceptRuleWert · RefWas dieses Ziel annimmt. Innerhalb eines sortierbaren Elements lässt ein Ziel, das den Drag ablehnt, die Liste darüber sortieren. Ein Wert oder ein Ref: Eine Funktion ist eine Regel.
AcceptModeWert · Ref · GetterStandard 'all'.
booleanWert · Ref · Gettertrue: Drags gehen darüber hinweg, als wäre es nicht da.
numberWert · Ref · GetterBei Zielen, die sich ohne Verschachtelung überlappen, gewinnt der höhere Wert (Standard 0). Sortierbare Elemente schlagen Container.
ComponentWert · RefWas das Overlay zeigt, während ein Drag, den dieses Ziel annimmt, darüber ist: eine Komponente, die OverlayProps bekommt und statt des eigenen Overlays des Drags gerendert wird (der Komponente des gezogenen Elements, des Slots des Providers oder des Klons); dieses bekommt sie als Standard-Slot, um es einzuhüllen oder wegzulassen (<slot />). Sie bleibt, während der Drop hier landet. Drags ohne Overlay (overlay: false) bleiben ohne. Ein Wert oder ein Ref, live gelesen; der Wechsel der Komponente wird mit der overlayTransition des Providers animiert. (Bei ziehbaren Elementen, Elementen und Listen ist overlay das eigene Overlay des Drags; sortierbare Listen und Bäume nehmen diese Option ebenfalls als overOverlay entgegen.)
DropAnimationWert · RefWie das Overlay landet, wenn es hier abgelegt wird, statt der dropAnimation des gezogenen Elements und des Providers: false lässt es dort, wo es abgelegt wurde (die eigene Animation einer Overlay-Komponente, ein Spritzer, läuft dort ab), eine Funktion animiert es. Ein Wert oder ein Ref, gelesen beim Drop.
(event: DnDEvent) => voidEin Drag ist über dieses Ziel gekommen, ob es den Drag annimmt oder nicht (event.over.accepted).
(event: DnDEvent) => voidDer Drag hat dieses Ziel verlassen.
(event: DnDEvent) => MaybePromise<BeforeDropResult>Wird gefragt, bevor ein Drop auf dieses Ziel durchgeht, nach dem onBeforeDrop der Monitore, wenn es den Drag annimmt (siehe BeforeDropResult). Darf asynchron sein: Das Overlay wartet dort, wo es abgelegt wurde. Ein Fehler lehnt den Drop ab.
(event: DnDEndEvent) => voidEin Drop auf dieses Ziel ist durchgegangen: Tu, was er bedeutet (das Element verschieben, die Datei hochladen). Wenn ein onBeforeDrop nur einige der gezogenen Elemente angenommen hat, enthält event.accepted ihre IDs und event.rejected die anderen, die zurückfliegen; active ist weiterhin der ganze Drag.
ExternalAcceptWert · Ref · GetterNimmt Drags von außerhalb der Seite an: Dateien vom Desktop, einen Link oder Text aus einer anderen App oder einem anderen Tab (das Drag and Drop des Browsers). Sie funktionieren wie die Drags der Bibliothek (isOver, isAccepting, die Events), und e.external hat beim Drop ihre Daten. Ziele ohne external ignorieren sie. Ein Wert, ein Ref oder ein Getter, live gelesen.
Rückgabe
Was makeDroppable zurückgibt.
ComputedRef<Key>Die ID des Ziels: die Option id oder die dafür erzeugte.
ComputedRef<boolean>Ein Drag ist darüber (mit external auch einer von außerhalb der Seite).
ComputedRef<boolean>Etwas wird gezogen, und dieses Ziel nimmt es an.
ComputedRef<Placement | null>Position des Zeigers relativ zu den Hälften des Ziels, während der Zeiger darüber ist.
Annahmeregeln
'*' oder weggelassen nimmt alles an. Elemente ohne Typ passen zu jeder String-Regel (entspricht groups: [] aus v2).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)Womit eine accept-Regel in Form einer Funktion aufgerufen wird.
'all': Jedes gezogene Element muss passen; 'some': mindestens eines (die übrigen können in onBeforeDrop abgelehnt werden).
type AcceptMode = 'all' | 'some'Von außerhalb der Seite
Was external von Drags annimmt, die von außerhalb der Seite kommen, und was ein solcher Drag
trägt (e.external). Siehe Dateien und andere Apps.
Was ein Drop-Ziel, eine Liste oder ein Baum von Drags annimmt, die von außerhalb der Seite kommen: Dateien vom Desktop, einen Link oder Text aus einer anderen App oder einem anderen Tab (external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)Dateien: true nimmt jede an. Oder wie bei <input accept>: MIME-Typen (image/*, application/pdf) und Dateiendungen (.md), als String mit Kommas oder als Liste; Dateiendungen werden beim Drop geprüft. Oder eine Funktion, die zu jeder Datei gefragt wird (false lehnt sie ab). Ordner werden nie angenommen.
booleanMehrere Dateien auf einmal (Standard true); false lehnt einen Drag mit mehr als einer Datei ab.
booleanLinks (text/uri-list): eine Adresse, die aus einem anderen Tab gezogen wird, ein Link aus einer Seite.
booleanReiner Text (text/plain): eine Auswahl, die aus einer anderen App gezogen wird.
readonly string[]Andere MIME-Typen, die es annimmt, genau so, wie andere Apps sie anbieten.
Ein Drag von außerhalb der Seite (Active.external, DnDEvent.external). Solange er gehalten wird, sagt der Browser, was er trägt, nicht die Daten: Die Dateien, Links und der Text kommen beim Drop (ready).
readonly string[]Die MIME-Typen, die er anbietet (Files, text/uri-list, text/plain, eigene einer App).
readonly string[]Die MIME-Typen seiner Dateien, einer pro Datei ('', wenn der Browser ihn nicht nennen kann).
readonly File[]Beim Drop: die Dateien, die das Ziel annimmt (ohne Ordner und abgelehnte Dateien).
readonly string[]Beim Drop: seine Links (text/uri-list).
stringBeim Drop: sein reiner Text.
stringBeim Drop: sein HTML.
(type: string) => stringBeim Drop: die Daten jedes Typs, den er anbietet ('' vorher und für einen Typ, den er nicht anbietet).
booleanEr wurde abgelegt: Die Daten oben sind da.
stringElemente der Bibliothek, die aus einem anderen Fenster der App hereingezogen werden (native): der Name ihrer sortierbaren Gruppe. Die Listen dieser Gruppe nehmen sie an, als kämen sie aus einer ihrer eigenen Listen; active.items enthält sie.
Eine Datei eines Drags von außerhalb, so wie ExternalAccept.files nach ihr gefragt wird. Solange die Dateien über der Seite gehalten werden, nennt der Browser nur ihre Typen: name und size kommen beim Drop.