Documentação/API
makeDroppable
Torna um elemento um alvo de drop, com regras para o que ele aceita e hooks para o drop.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;Torna um elemento um alvo de drop.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
Veja Arrastar e soltar e Decidindo um drop.
Carregando a 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>Opções
Opções de makeDroppable.
Drop dentro de um item. Um alvo de drop no elemento de um item ordenável (ou dentro dele) funciona como em qualquer outro lugar, com uma regra enquanto a lista desse item ordenaria o arraste: ele só conta enquanto o ponteiro está no meio do item (25–75% ao longo do eixo da lista; x em grades), onde o drop vai para dentro do alvo e a lista não se mexe por causa dele. Perto das bordas do item, a lista ordena como sempre. Um alvo cujo accept recusa o arraste fica de fora, então a lista ordena sobre o item como sobre qualquer outro (não é preciso desativá-lo). O teclado para em um alvo assim antes de passar pelo item dele. Um arraste nunca mira o que ele carrega: nenhum alvo dentro (ou em cima) de um item arrastado, nem na posição em que um deles pousa. Para tirar os itens da lista deles em onDrop, chame e.source.remove().
Toda opção, menos os callbacks, aceita um valor, um ref ou um getter (accept, overOverlay, overDropAnimation: um valor ou um ref) e é lida ao vivo, enquanto um arraste procura o seu alvo.
Keyvalor · ref · getterPadrão: useId(), estável entre a renderização no servidor e no cliente.
TDatavalor · ref · getterQualquer coisa a dizer sobre o alvo: os eventos a carregam como over.data.
stringvalor · ref · getterComo as pessoas o chamam: os textos para leitores de tela dizem isso em vez do id (over Trash); os eventos o trazem como over.label.
AcceptRulevalor · refO que este alvo aceita. Dentro de um item ordenável, um alvo que recusa o arraste deixa a lista ordenar sobre ele. Um valor ou um ref: uma função é uma regra.
AcceptModevalor · ref · getterPadrão 'all'.
booleanvalor · ref · gettertrue: os arrastes passam por cima dele como se ele não estivesse ali.
numbervalor · ref · getterO maior vence quando os alvos se sobrepõem sem estarem aninhados (padrão 0). Itens ordenáveis vencem contêineres.
Componentvalor · refO que o overlay mostra enquanto um arraste que este alvo aceita está sobre ele: um componente que recebe OverlayProps, renderizado no lugar do overlay do próprio arraste (o componente do item arrastado, o slot do provider ou o clone), que ele recebe como slot padrão para envolver ou deixar de fora (<slot />). Ele fica enquanto o drop pousa aqui. Arrastes sem overlay (overlay: false) continuam sem nenhum. Um valor ou um ref, lido ao vivo; a troca de componente é animada com o overlayTransition do provider. (Em draggables, itens e listas, overlay é o overlay do próprio arraste; listas ordenáveis e árvores também recebem este como overOverlay.)
DropAnimationvalor · refComo o overlay pousa quando é solto aqui, em vez do dropAnimation do item arrastado e do provider: false o deixa onde foi solto (a animação própria de um componente de overlay, um respingo, acontece ali), uma função o anima. Um valor ou um ref, lido no drop.
(event: DnDEvent) => voidUm arraste chegou sobre este alvo, quer ele aceite o arraste ou não (event.over.accepted).
(event: DnDEvent) => voidO arraste saiu deste alvo.
(event: DnDEvent) => MaybePromise<BeforeDropResult>Consultado antes de um drop neste alvo se concretizar, depois do onBeforeDrop dos monitores, se ele aceita o arraste (veja BeforeDropResult). Pode ser assíncrono: o overlay espera onde foi solto. Um erro rejeita o drop.
(event: DnDEndEvent) => voidUm drop neste alvo se concretizou: faça o que ele significa (mover o item, enviar o arquivo). Quando um onBeforeDrop aceitou só alguns dos itens arrastados, event.accepted tem os ids deles e event.rejected os outros, que voltam ao lugar; active continua sendo o arraste inteiro.
ExternalAcceptvalor · ref · getterAceita arrastes de fora da página: arquivos da área de trabalho, um link ou texto de outro app ou aba (o arrastar e soltar do navegador). Eles funcionam como os arrastes da biblioteca (isOver, isAccepting, os eventos), e e.external tem os dados deles no drop. Alvos sem external os ignoram. Um valor, um ref ou um getter, lido ao vivo.
Retorno
O que makeDroppable retorna.
ComputedRef<Key>O id do alvo: a opção id, ou o que foi gerado para ele.
ComputedRef<boolean>Um arraste está sobre ele (um de fora da página também, com external).
ComputedRef<boolean>Algo está sendo arrastado e este alvo o aceita.
ComputedRef<Placement | null>Posição do ponteiro em relação às metades do alvo enquanto ele está sob o ponteiro.
Regras de accept
'*' ou omitido aceita tudo. Itens sem tipo passam em qualquer regra de string (equivalente a groups: [] da v2).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)Com o que uma regra accept em forma de função é consultada.
'all': todos os itens arrastados precisam passar; 'some': pelo menos um (o resto pode ser rejeitado no onBeforeDrop).
type AcceptMode = 'all' | 'some'De fora da página
O que external aceita de arrastes que vêm de fora da página, e o que um arraste assim carrega
(e.external). Veja arquivos e outros apps.
O que um alvo de drop, uma lista ou uma árvore aceita de arrastes que vêm de fora da página: arquivos da área de trabalho, um link ou texto de outro app ou aba (external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)Arquivos: true aceita qualquer um. Ou como no <input accept>: tipos MIME (image/*, application/pdf) e extensões (.md), uma string com vírgulas ou uma lista; as extensões são verificadas no drop. Ou uma função consultada sobre cada arquivo (false o recusa). Pastas nunca são aceitas.
booleanVários arquivos de uma vez (padrão true); false recusa um arraste de mais de um.
booleanLinks (text/uri-list): um endereço arrastado de outra aba, um link de uma página.
booleanTexto simples (text/plain): uma seleção arrastada de outro app.
readonly string[]Outros tipos MIME que ele aceita, exatamente como outros apps os oferecem.
Um arraste de fora da página (Active.external, DnDEvent.external). Enquanto o arraste continua, o navegador diz o que ele carrega, não os dados: os arquivos, links e texto chegam no drop (ready).
readonly string[]Os tipos MIME que ele oferece (Files, text/uri-list, text/plain, os de um app).
readonly string[]Os tipos MIME dos arquivos dele, um por arquivo ('' quando o navegador não sabe dizer).
readonly File[]No drop: os arquivos que o alvo aceita (pastas e arquivos recusados ficam de fora).
readonly string[]No drop: os links dele (text/uri-list).
stringNo drop: o texto simples dele.
stringNo drop: o HTML dele.
(type: string) => stringNo drop: os dados de qualquer tipo que ele oferece ('' antes disso, e para um tipo que ele não oferece).
booleanEle foi solto: os dados acima estão disponíveis.
stringItens da biblioteca arrastados de outra janela do app (native): o nome do grupo ordenável deles. As listas desse grupo os aceitam como se viessem de uma das próprias listas; active.items os contém.
Um arquivo de um arraste de fora, como ExternalAccept.files é consultado sobre ele. Enquanto os arquivos estão sobre a página, o navegador informa só os tipos deles: name e size chegam no drop.