デモを読み込み中…
<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>;ドラッグされている 1 つのアイテムのデフォルトのクローン（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>
クローンは持ち上げた時点で、掴んだアイテムと、ドロップ順でその隣にあるほかのアイテムについて、プロバイダーの overlayPreviews の数だけ作られます（デフォルトは 5）。それ以外のアイテムでは、DragPreview はデフォルトスロットを描画するか、何も描画しません。ドロップすると、各プレビューはそれぞれのアイテムへ飛んでいきます。ゾーン（フォルダーやゴミ箱）にドロップした場合は、プレビューが 1 つずつ順にそのゾーンへ入ります。オーバーレイのガイドを参照してください。
DragPreview の props：ドラッグ中の 1 つのアイテムのデフォルトのクローンで、複数のアイテムを自分でレイアウトするカスタムオーバーレイ（overlay コンポーネントまたはプロバイダーの #overlay スロット）向けです。例：<DragPreview v-for="item in items" :key="item.id" :id="item.id" />。
クローンは持ち上げた時点で、掴んだアイテムと、ドロップ順でその隣にあるほかのアイテムについて、プロバイダーの overlayPreviews の数だけ作られます（デフォルトは 5。その時点で描画されているもの）。それ以外のアイテムでは、DragPreview はデフォルトスロットを描画するか、何も描画しません。クローンは要素いっぱいに表示されます。その要素のサイズは持ち上げた時点のアイテムのサイズで、インラインで設定されます。変更するには style を使ってください（:style="{ width: '100%', height: '100%' }"）。style はそのまま渡されますが、クラスでは上書きできません。
並べ替え可能なリストのマルチドラッグ（multiple: 'group' または 'gaps'）では、掴んだもの以外のアイテムのプレビューは、レイアウトがどこに置いていても、ドロップとともにそのアイテムの位置に着地します（キャンセル時は元の場所に戻ります）：transform で回転・拡大縮小されたラッパーは途中で打ち消され、サイズは幅と高さとしてアニメーションします。スタイル（角丸、影）はプレビュー自体に付けてください：ラッパーはボックスの中に留まります。クローンのないアイテムは、代わりにフェードインします。（リストではなく）ゾーンにドロップされると、プレビューは 1 つずつ順にそこへ入り、ボックスは最後に入ります。
Keyドラッグ中のアイテムの id：OverlayProps の items のいずれか。
オーバーレイの props
オーバーレイコンポーネント（ドラッグ可能な要素、並べ替え可能なアイテム、リスト、ツリーの overlay オプション）とプロバイダーの #overlay スロットが受け取るもの。
オーバーレイが表示するもの：プロバイダーの #overlay スロットと、オーバーレイコンポーネント（ドラッグ可能な要素、並べ替え可能なアイテム、リスト、ツリーの overlay オプション）の props。
Active現在のドラッグ。
DragItem[]ドラッグ中のすべてのアイテム。主となるものが先頭です：マルチドラッグ全体で 1 つのオーバーレイ。
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