正在加载演示…
<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>;一个被拖拽项的默认克隆（见 DragPreviewProps）。自定义浮层用它自行排布多个项；默认浮层用它显示多项拖拽。
<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>
克隆在拿起时生成：抓起的项，以及按放置顺序与它相邻的其他项，数量为 provider 的 overlayPreviews（默认 5 个）。对于其他任何项，DragPreview 渲染它的默认插槽，或者什么都不渲染。放置时，每个预览飞向它自己对应的项；放置进某个区域（文件夹、回收站）时，预览依次进入该区域。参见浮层指南。
DragPreview 的 props：某一个被拖拽项的默认克隆，用于自行布局多个项的自定义浮层（overlay 组件或 provider 的 #overlay 插槽），例如 <DragPreview v-for="item in items" :key="item.id" :id="item.id" />。
克隆在拿起时生成：抓起的项，以及按放置顺序与它相邻的其他项，数量为 provider 的 overlayPreviews（默认 5；限于当时已渲染的那些）。对于其他任何项，DragPreview 把它的默认插槽渲染在一个像克隆一样接受 class 和 style 的元素中；没有默认插槽时什么都不渲染。克隆会填满这个元素，元素的尺寸是该项在拿起时的尺寸，以内联样式设置：用 style 修改它（:style="{ width: '100%', height: '100%' }"），style 会透传；class 无法覆盖它。
在可排序的多项拖拽中（multiple: 'group' 或 'gaps'），抓起的项以外的项的预览会随放置落到该项的位置上（取消时回到原处），无论布局把它放在哪里：途中会撤销用 transform 旋转或缩放的包裹元素，它的尺寸以宽度和高度的方式执行动画。为预览本身设置样式（圆角、阴影）：它的包裹元素留在盒子里。没有克隆的项则改为淡入。放置进某个区域（而不是列表）时，各个预览依次进入该区域，盒子最后进入。
Key某个被拖拽项的 id：OverlayProps 中 items 的其中之一。
浮层 props
浮层组件（可拖拽元素、可排序项、列表和树的 overlay 选项）和 provider 的 #overlay 插槽收到的内容。
浮层显示的内容：provider 的 #overlay 插槽和浮层组件（可拖拽元素、可排序项、列表和树的 overlay 选项）的 props。
Active这次拖拽。
DragItem[]所有被拖拽的项，主项在最前：整个多项拖拽只用一个浮层。
Over | null拖拽下方的放置目标。已确定的放置执行动画期间，是它要落到的目标（保持放置那一刻的状态）；被取消的拖拽飞回原处时为 null。
booleanover 是否接收被拖拽的项；下方没有目标时为 false。
DnDStatus'dragging'，然后在浮层落位（或飞回原处）时为 'dropping'。
DragMode此刻放置会做什么（见 DnDEvent.mode）：例如复制时显示一个加号。
DropDestination | null现在放置会把被拖拽的项放到可排序列表或树中的哪里：例如按树拖拽将进入的文件夹给浮层着色。在所有目标之外，是空位所在的地方，dropOutside: 'placeholder'（默认值）会把它们留在那里。当放置不会把它们放进任何列表时为 null：在普通放置目标上方、在拒绝它们的列表上方、在 dropOutside: 'cancel' 或 'remove' 时位于目标之外。已确定的放置执行动画期间，是它落到的位置。
浮层组件的 props，用于 defineProps<OverlayProps>()。
组件渲染在浮层盒子内部，盒子跟随位置的尺寸（overlayFit: 'slot'），并在放置时以动画方式变化。给根元素设置 width: 100%（以及 height: 100%）以跟随这个尺寸；固定尺寸会保持组件自己的尺寸。
type OverlayProps = OverlaySlotProps