Docs/API
DragPreview and overlay props
The clone of a dragged item, for custom overlays that lay out several items themselves — and the props overlay components get.
Loading the 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>;The default clone of one dragged item (see DragPreviewProps). Custom overlays use it to lay out several items themselves; the default overlay shows a multi-drag with it.
<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>
Clones are taken at pickup, of the grabbed item and of the others next to it in drop order,
as many as the provider's overlayPreviews (5 by default). For any other item DragPreview
renders its default slot, or nothing. On drop each preview flies to its own item; dropped
into a zone (a folder, a trash can), the previews go in one after another. See
the overlay guide.
Props of DragPreview: the default clone of one dragged item, for custom overlays (an overlay component or the provider's #overlay slot) that lay out several items themselves, e.g. <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.
Clones are taken at pickup, of the grabbed item and of the others next to it in drop order, as many as the provider's overlayPreviews (5 by default; those that are rendered then). For any other item DragPreview renders its default slot in an element that takes class and style as a clone's does, or nothing without one. The clone fills the element, which has the item's size at pickup, set inline: change it with style (:style="{ width: '100%', height: '100%' }"), which falls through; a class can't override it.
In a sortable multi-drag (multiple: 'group' or 'gaps'), the preview of an item other than the grabbed one lands on that item's slot with the drop (back on its place when cancelled), from wherever the layout put it: wrappers turned or scaled with transform are undone on the way, its size animates as width and height. Style the preview itself (corners, shadow): its wrappers stay in the box. Items without a clone fade in instead. Dropped into a zone (not a list), the previews go into it one after another, the box last.
KeyId of a dragged item: one of items in OverlayProps.
Overlay props
What an overlay component (the overlay option of draggables, sortable items, lists and
trees) and the provider's #overlay slot get.
What the overlay shows: the props of the provider's #overlay slot and of overlay components (overlay option of draggables, sortable items, lists and trees).
ActiveThe drag.
DragItem[]Every dragged item, the primary one first: one overlay for the whole multi-drag.
Over | nullThe drop target under the drag. While a decided drop animates, the target it lands on (as it was at the drop); null while a cancelled drag flies back.
booleanWhether over accepts the dragged items; false when over nothing.
DnDStatus'dragging', then 'dropping' while the overlay lands (or flies back).
DragModeWhat a drop would do now (see DnDEvent.mode): e.g. show a plus while it copies.
DropDestination | nullWhere a drop would put the dragged items now, in a sortable list or tree: e.g. tint the overlay by the folder a tree drag would go into. Outside every target it is the slot's place, where dropOutside: 'placeholder' (the default) keeps them. null when the drop would put them in no list: over a plain drop target, over a list that refuses them, outside with dropOutside: 'cancel' or 'remove'. While a decided drop animates, the place it lands on.
Props of an overlay component, for defineProps<OverlayProps>().
The component renders inside the overlay box, which follows the slot size (overlayFit: 'slot') and animates it on drop. Give the root width: 100% (and height: 100%) to follow that size; a fixed size keeps the component's own.
type OverlayProps = OverlaySlotPropsWhere a drop would put the dragged items: a place in a sortable list or tree, as the drop event's to will say (the overlay's to prop, live).