Documentación/API
makeDroppable
Convierte un elemento en un destino de drop, con reglas sobre lo que acepta y hooks para el drop.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;Convierte un elemento en destino de drop.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
Consulta Arrastrar y soltar y Decidir un drop.
Cargando la demo…
<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>Opciones
Opciones de makeDroppable.
Soltar dentro de un ítem. Un destino de drop en el elemento de un ítem ordenable (o dentro de él) funciona como en cualquier otro sitio, con una regla mientras la lista de ese ítem ordenaría el arrastre: solo cuenta mientras el puntero está en el centro del ítem (del 25 al 75 % a lo largo del eje de la lista; x en cuadrículas), donde el drop va al destino y la lista no se mueve por él. Cerca de los bordes del ítem, la lista ordena como siempre. Un destino cuyo accept rechaza el arrastre se omite, así que la lista ordena sobre el ítem como sobre cualquier otro (no hace falta desactivarlo). El teclado se detiene en un destino así antes de pasar de largo su ítem. Un arrastre nunca apunta a lo que lleva: ningún destino dentro de (o sobre) un ítem arrastrado, ni en el hueco donde cae uno. Para sacar los ítems de su lista en onDrop, llama a e.source.remove().
Todas las opciones salvo los callbacks aceptan un valor, una ref o un getter (accept, overOverlay, overDropAnimation: un valor o una ref) y se leen en vivo, mientras un arrastre busca su destino.
Keyvalor · ref · getterPor defecto: useId(), estable entre el renderizado en el servidor y en el cliente.
TDatavalor · ref · getterCualquier cosa que contar sobre el destino: los eventos lo llevan como over.data.
stringvalor · ref · getterEl nombre que le da la gente: los textos para lectores de pantalla lo dicen en lugar del id (over Trash); los eventos lo llevan en over.label.
AcceptRulevalor · refLo que acepta este destino. Dentro de un ítem ordenable, uno que rechaza el arrastre deja que la lista ordene sobre él. Un valor o una ref: una función es una regla.
AcceptModevalor · ref · getter'all' por defecto.
booleanvalor · ref · gettertrue: los arrastres pasan por encima como si no estuviera.
numbervalor · ref · getterGana el más alto cuando los destinos se solapan sin estar anidados (0 por defecto). Los ítems ordenables ganan a los contenedores.
Componentvalor · refLo que muestra el overlay mientras un arrastre que este destino acepta está sobre él: un componente que recibe OverlayProps, renderizado en lugar del overlay propio del arrastre (el componente del ítem arrastrado, el slot del provider o el clon), que recibe como su slot por defecto para envolverlo o dejarlo fuera (<slot />). Se queda mientras el drop aterriza aquí. Los arrastres sin overlay (overlay: false) siguen sin tenerlo. Un valor o una ref, que se lee en vivo; el cambio de componente se anima con la overlayTransition del provider. (En los elementos arrastrables, los ítems y las listas, overlay es el overlay propio del arrastre; las listas ordenables y los árboles también aceptan esta como overOverlay.)
DropAnimationvalor · refCómo aterriza el overlay cuando se suelta aquí, en lugar de la dropAnimation del ítem arrastrado y la del provider: false lo deja donde se soltó (allí se reproduce la animación propia de un componente de overlay, una salpicadura), una función lo anima. Un valor o una ref, que se lee al soltar.
(event: DnDEvent) => voidUn arrastre llegó sobre este destino, lo acepte o no (event.over.accepted).
(event: DnDEvent) => voidEl arrastre salió de este destino.
(event: DnDEvent) => MaybePromise<BeforeDropResult>Se consulta antes de que un drop sobre este destino se lleve a cabo, después del onBeforeDrop de los monitores, si acepta el arrastre (consulta BeforeDropResult). Puede ser asíncrono: el overlay espera donde se soltó. Un error rechaza el drop.
(event: DnDEndEvent) => voidUn drop sobre este destino se llevó a cabo: haz lo que significa (mover el ítem, subir el archivo). Cuando un onBeforeDrop aceptó solo algunos de los ítems arrastrados, event.accepted tiene sus ids y event.rejected los demás, que vuelven a su sitio; active sigue siendo el arrastre entero.
ExternalAcceptvalor · ref · getterAcepta arrastres desde fuera de la página: archivos desde el escritorio, un enlace o texto desde otra app o pestaña (el arrastrar y soltar del navegador). Funcionan como los arrastres de la biblioteca (isOver, isAccepting, los eventos), y e.external tiene sus datos al soltar. Los destinos sin external los ignoran. Un valor, una ref o un getter, que se lee en vivo.
Valor devuelto
Lo que devuelve makeDroppable.
ComputedRef<Key>El id del destino: la opción id o el que se creó para él.
ComputedRef<boolean>Hay un arrastre sobre él (también uno desde fuera de la página, con external).
ComputedRef<boolean>Se está arrastrando algo y este destino lo acepta.
ComputedRef<Placement | null>Posición del puntero respecto a las mitades del destino mientras está encima.
Reglas de aceptación
'*' u omitida acepta todo. Los ítems sin tipo encajan con cualquier regla de tipo cadena (equivalente a groups: [] de la v2).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)Con qué se llama a una regla accept que es una función.
'all': todos los ítems arrastrados deben coincidir; 'some': al menos uno (los demás se pueden rechazar en onBeforeDrop).
type AcceptMode = 'all' | 'some'Desde fuera de la página
Lo que external acepta de los arrastres que vienen de fuera de la página, y lo que lleva un
arrastre así (e.external). Consulta archivos y otras apps.
Lo que un destino de drop, una lista o un árbol acepta de los arrastres que vienen de fuera de la página: archivos desde el escritorio, un enlace o texto desde otra app o pestaña (external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)Archivos: true acepta cualquiera. O como en <input accept>: tipos MIME (image/*, application/pdf) y extensiones (.md), en una cadena separada por comas o una lista; las extensiones se comprueban al soltar. O una función a la que se pregunta por cada archivo (false lo rechaza). Las carpetas nunca se aceptan.
booleanVarios archivos a la vez (true por defecto); false rechaza un arrastre de más de uno.
booleanEnlaces (text/uri-list): una dirección arrastrada desde otra pestaña, un enlace de una página.
booleanTexto plano (text/plain): una selección arrastrada desde otra app.
readonly string[]Otros tipos MIME que acepta, exactamente como los ofrecen otras apps.
Un arrastre desde fuera de la página (Active.external, DnDEvent.external). Mientras se mantiene, el navegador dice lo que lleva, no los datos: los archivos, enlaces y texto llegan al soltar (ready).
readonly string[]Los tipos MIME que ofrece (Files, text/uri-list, text/plain, los propios de una app).
readonly string[]Los tipos MIME de sus archivos, uno por archivo ('' cuando el navegador no lo sabe).
readonly File[]Al soltar: los archivos que acepta el destino (sin las carpetas ni los archivos rechazados).
readonly string[]Al soltar: sus enlaces (text/uri-list).
stringAl soltar: su texto plano.
stringAl soltar: su HTML.
(type: string) => stringAl soltar: los datos de cualquier tipo que ofrezca ('' antes, y para un tipo que no ofrece).
booleanSe soltó: los datos de arriba ya están.
stringÍtems de la biblioteca arrastrados desde otra ventana de la app (native): el nombre de su grupo ordenable. Las listas de ese grupo los aceptan como si vinieran de una de sus propias listas; active.items los contiene.
Un archivo de un arrastre de fuera, tal como se le pregunta por él a ExternalAccept.files. Mientras los archivos se mantienen sobre la página, el navegador solo dice sus tipos: name y size llegan al soltar.