데모 불러오는 중…
<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>
클론은 집을 때 만들어집니다. 집은 항목과, 드롭 순서상 그 옆에 있는 다른 항목들의 클론으로,
프로바이더의 overlayPreviews만큼 만들어집니다(기본값 5). 그 밖의 항목에 대해서는 DragPreview가
기본 슬롯을 렌더링하거나 아무것도 렌더링하지 않습니다. 드롭하면 각 미리보기가 자기 항목으로
날아가고, 영역(폴더, 휴지통)에 드롭하면 미리보기가 하나씩 차례로 그 안으로 들어갑니다.
오버레이 가이드를 참고하세요.
DragPreview의 props: 드래그 중인 항목 하나의 기본 클론으로, 여러 항목을 직접 배치하는 커스텀 오버레이(overlay 컴포넌트나 프로바이더의 #overlay 슬롯)에 씁니다. 예: <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.
클론은 집을 때 만들어집니다. 집은 항목과 드롭 순서상 그 옆에 있는 다른 항목들의 클론으로, 프로바이더의 overlayPreviews만큼 만들어집니다(기본값 5, 그 시점에 렌더링되어 있는 것). 그 밖의 항목에 대해서는 DragPreview가 클론처럼 class와 style을 받는 요소 안에 기본 슬롯을 렌더링하고, 슬롯이 없으면 아무것도 렌더링하지 않습니다. 클론은 요소를 채우며, 요소는 집을 때의 항목 크기를 가지고 이 크기는 인라인으로 지정됩니다. 바꾸려면 그대로 전달되는 style을 쓰세요(:style="{ width: '100%', height: '100%' }"). 클래스로는 덮어쓸 수 없습니다.
정렬 가능한 멀티 드래그(multiple: 'group' 또는 'gaps')에서는 집은 항목이 아닌 항목의 미리보기가, 레이아웃이 어디에 두었든 드롭과 함께 그 항목의 자리에 안착합니다(취소되면 원래 자리로 돌아갑니다). transform으로 회전하거나 확대·축소한 래퍼는 이동하는 동안 원래대로 돌아가고, 크기는 너비와 높이로 애니메이션됩니다. 미리보기 자체를 스타일링하세요(모서리, 그림자). 래퍼는 박스 안에 남습니다. 클론이 없는 항목은 대신 서서히 나타납니다. (리스트가 아닌) 영역에 드롭하면 미리보기가 하나씩 차례로 그 안으로 들어가고, 박스는 마지막에 들어갑니다.
Key드래그 중인 항목의 id: OverlayProps의 items 중 하나.
오버레이 props
오버레이 컴포넌트(draggable, 정렬 가능한 항목, 리스트, 트리의 overlay 옵션)와 프로바이더의
#overlay 슬롯이 받는 것입니다.
오버레이가 보여 주는 것: 프로바이더의 #overlay 슬롯과 오버레이 컴포넌트(draggable, 정렬 가능한 항목, 리스트, 트리의 overlay 옵션)의 props.
Active현재 드래그.
DragItem[]드래그 중인 모든 항목. 주 항목이 맨 앞입니다. 멀티 드래그 전체에 오버레이는 하나입니다.
Over | null드래그 아래의 드롭 대상. 결정된 드롭이 애니메이션되는 동안에는 안착하는 대상(드롭 시점의 상태)입니다. 취소된 드래그가 원래 자리로 돌아가는 동안에는 null.
booleanover가 드래그 중인 항목을 받아들이는지 여부. 아래에 아무것도 없으면 false.
DnDStatus'dragging', 그리고 오버레이가 안착하는(또는 원래 자리로 돌아가는) 동안은 'dropping'.
DragMode지금 드롭하면 일어날 일(DnDEvent.mode 참고): 예를 들어 복사하는 동안 더하기 표시를 보여 줍니다.
DropDestination | null지금 드롭하면 드래그 중인 항목이 정렬 가능한 리스트나 트리 안에서 놓일 곳. 예를 들어 트리 드래그가 들어갈 폴더에 따라 오버레이에 색을 입힐 수 있습니다. 모든 대상 밖에서는 자리의 위치이며, dropOutside: 'placeholder'(기본값)가 항목을 그곳에 남깁니다. 드롭이 항목을 어떤 리스트에도 놓지 않을 때는 null: 일반 드롭 대상 위, 항목을 거부하는 리스트 위, dropOutside: 'cancel'이나 'remove'일 때의 대상 밖. 결정된 드롭이 애니메이션되는 동안에는 안착하는 곳.
defineProps<OverlayProps>()에 쓰는 오버레이 컴포넌트의 props.
컴포넌트는 오버레이 박스 안에서 렌더링됩니다. 박스는 자리의 크기를 따르고(overlayFit: 'slot') 드롭할 때 그 크기를 애니메이션합니다. 그 크기를 따르려면 루트에 width: 100%(와 height: 100%)를 지정하세요. 고정 크기를 주면 컴포넌트 자체의 크기가 유지됩니다.
type OverlayProps = OverlaySlotProps