Documentação/API
DragPreview e props do overlay
O clone de um item arrastado, para overlays personalizados que organizam vários itens por conta própria — e as props que os componentes de overlay recebem.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
Carregando a demo…
<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>;O clone padrão de um item arrastado (veja DragPreviewProps). Overlays personalizados o usam para dispor vários itens por conta própria; o overlay padrão mostra um multi-drag com ele.
<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>
Os clones são feitos quando o item é pego: do item pego e dos outros ao lado dele na ordem do
drop, tantos quanto o overlayPreviews do provider (5 por padrão). Para qualquer outro item,
DragPreview renderiza o seu slot padrão, ou nada. No drop, cada prévia voa até o seu próprio
item; num drop em uma zona (uma pasta, uma lixeira), as prévias entram uma depois da outra. Veja
o guia do overlay.
Props de DragPreview: o clone padrão de um item arrastado, para overlays personalizados (um componente overlay ou o slot #overlay do provider) que organizam vários itens por conta própria, por exemplo, <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.
Os clones são feitos quando o item é pego: do item pego e dos outros ao lado dele na ordem do drop, tantos quanto o overlayPreviews do provider (5 por padrão; os que estão renderizados nesse momento). Para qualquer outro item, DragPreview renderiza o seu slot padrão em um elemento que recebe class e style como o de um clone, ou nada quando não há slot. O clone preenche o elemento, que tem o tamanho que o item tinha ao ser pego, definido inline: mude-o com style (:style="{ width: '100%', height: '100%' }"), que é repassado; uma classe não consegue sobrescrevê-lo.
Em um multi-drag ordenável (multiple: 'group' ou 'gaps'), a prévia de um item que não é o pego pousa na posição desse item com o drop (de volta ao seu lugar quando cancelado), de onde quer que o layout a tenha colocado: wrappers girados ou escalados com transform são desfeitos no caminho, e o tamanho dela é animado como largura e altura. Estilize a própria prévia (cantos, sombra): os wrappers dela ficam na caixa. Itens sem clone surgem aos poucos em vez disso. Soltas em uma zona (não em uma lista), as prévias entram nela uma depois da outra, a caixa por último.
KeyId de um item arrastado: um dos items em OverlayProps.
Props do overlay
O que um componente de overlay (a opção overlay de draggables, itens ordenáveis, listas e
árvores) e o slot #overlay do provider recebem.
O que o overlay mostra: as props do slot #overlay do provider e dos componentes de overlay (opção overlay de draggables, itens ordenáveis, listas e árvores).
ActiveO arraste.
DragItem[]Todos os itens arrastados, começando pelo principal: um único overlay para o multi-drag inteiro.
Over | nullO alvo de drop sob o arraste. Enquanto um drop decidido é animado, o alvo em que ele pousa (como estava no drop); null enquanto um arraste cancelado volta ao lugar.
booleanSe over aceita os itens arrastados; false quando não há nada embaixo.
DnDStatus'dragging', depois 'dropping' enquanto o overlay pousa (ou volta ao lugar).
DragModeO que um drop faria agora (veja DnDEvent.mode): por exemplo, mostrar um sinal de mais enquanto copia.
DropDestination | nullOnde um drop colocaria os itens arrastados agora, em uma lista ou árvore ordenável: por exemplo, pinte o overlay conforme a pasta em que um arraste na árvore entraria. Fora de qualquer alvo, é o lugar da posição, onde dropOutside: 'placeholder' (o padrão) os mantém. null quando o drop não os colocaria em nenhuma lista: sobre um alvo de drop simples, sobre uma lista que os recusa, fora com dropOutside: 'cancel' ou 'remove'. Enquanto um drop já decidido é animado, o lugar em que ele pousa.
Props de um componente de overlay, para defineProps<OverlayProps>().
O componente é renderizado dentro da caixa do overlay, que acompanha o tamanho da posição (overlayFit: 'slot') e o anima no drop. Dê à raiz width: 100% (e height: 100%) para acompanhar esse tamanho; um tamanho fixo mantém o do próprio componente.
type OverlayProps = OverlaySlotPropsOnde um drop colocaria os itens arrastados: um lugar em uma lista ou árvore ordenável, como o to do evento de drop vai dizer (a prop to do overlay, ao vivo).