Documentación/API
DragPreview y props del overlay
El clon de un ítem arrastrado, para overlays personalizados que colocan ellos mismos varios ítems — y las props que reciben los componentes de overlay.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
Cargando la 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>;El clon por defecto de un ítem arrastrado (consulta DragPreviewProps). Los overlays personalizados lo usan para colocar ellos mismos varios ítems; el overlay por defecto muestra con él un multi-drag.
<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>
Los clones se toman al agarrar: del ítem agarrado y de los demás junto a él en el orden del drop,
tantos como indique el overlayPreviews del provider (5 por defecto). Para cualquier otro ítem,
DragPreview renderiza su slot por defecto, o nada. Al soltar, cada vista previa vuela a su
propio ítem; al soltar en una zona (una carpeta, una papelera), las vistas previas entran una tras otra. Consulta
la guía del overlay.
Props de DragPreview: el clon por defecto de un ítem arrastrado, para overlays personalizados (un componente overlay o el slot #overlay del provider) que colocan ellos mismos varios ítems, por ejemplo <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.
Los clones se toman al agarrar: del ítem agarrado y de los demás junto a él en el orden del drop, tantos como indique el overlayPreviews del provider (5 por defecto; los que estén renderizados en ese momento). Para cualquier otro ítem, DragPreview renderiza su slot por defecto en un elemento que recibe class y style igual que el de un clon, o nada si no hay slot. El clon llena el elemento, que recibe al agarrarlo el tamaño del ítem como estilo inline: cámbialo con style (:style="{ width: '100%', height: '100%' }"), que se transmite; una clase no puede sobrescribirlo.
En un multi-drag ordenable (multiple: 'group' o 'gaps'), la vista previa de un ítem distinto del agarrado aterriza con el drop en el hueco de ese ítem (de vuelta a su sitio si se cancela), desde donde la haya colocado el layout: los contenedores girados o escalados con transform se deshacen por el camino, y su tamaño se anima como ancho y alto. Da estilo a la propia vista previa (esquinas, sombra): sus contenedores se quedan en la caja. Los ítems sin clon surgen con un fundido en su lugar. Al soltarlas en una zona (no en una lista), las vistas previas entran en ella una tras otra, la caja la última.
KeyId de un ítem arrastrado: uno de los items de OverlayProps.
Props del overlay
Lo que reciben un componente de overlay (la opción overlay de los elementos arrastrables, los
ítems ordenables, las listas y los árboles) y el slot #overlay del provider.
Lo que muestra el overlay: las props del slot #overlay del provider y de los componentes de overlay (opción overlay de los elementos arrastrables, los ítems ordenables, las listas y los árboles).
ActiveEl arrastre.
DragItem[]Todos los ítems arrastrados, empezando por el principal: un solo overlay para todo el multi-drag.
Over | nullEl destino de drop bajo el arrastre. Mientras se anima un drop ya decidido, el destino en el que aterriza (tal como estaba al soltar); null mientras un arrastre cancelado vuelve a su sitio.
booleanSi over acepta los ítems arrastrados; false cuando no hay nada debajo.
DnDStatus'dragging', y luego 'dropping' mientras el overlay aterriza (o vuelve a su sitio).
DragModeLo que haría un drop ahora (consulta DnDEvent.mode): p. ej., mostrar un más mientras copia.
DropDestination | nullDónde pondría ahora un drop los ítems arrastrados, en una lista o un árbol ordenables: por ejemplo, para teñir el overlay según la carpeta en la que entraría un arrastre de árbol. Fuera de todos los destinos es el sitio del hueco, donde los deja dropOutside: 'placeholder' (el valor por defecto). null cuando el drop no los pondría en ninguna lista: sobre un destino de drop simple, sobre una lista que los rechaza, fuera con dropOutside: 'cancel' o 'remove'. Mientras se anima un drop ya decidido, el sitio en el que aterriza.
Props de un componente de overlay, para defineProps<OverlayProps>().
El componente se renderiza dentro de la caja del overlay, que sigue el tamaño del hueco (overlayFit: 'slot') y lo anima al soltar. Da a la raíz width: 100% (y height: 100%) para seguir ese tamaño; un tamaño fijo mantiene el del componente.
type OverlayProps = OverlaySlotPropsDónde pondría un drop los ítems arrastrados: un sitio en una lista o un árbol ordenables, como lo dirá el to del evento de drop (la prop to del overlay, en vivo).