function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;요소를 드롭 대상으로 만듭니다.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
데모 불러오는 중…
<script setup lang="ts">
import { reactive } from 'vue';
import { DnDProvider, type Key } from '@vue-dnd-kit/core';
import FileChip from './FileChip.vue';
import Zone from './Zone.vue';
import { FILES } from './files';
/** Which zone each file is in. */
const where = reactive<Record<string, string>>(Object.fromEntries(FILES.map((file) => [file.id, 'desk'])));
const filesIn = (zone: string) => FILES.filter((file) => where[file.id] === zone);
const move = (zone: string, file: Key) => (where[String(file)] = zone);
</script>
<template>
<DnDProvider>
<div class="zones">
<Zone title="Desktop" rule="takes anything" class="desk" @drop="move('desk', $event)">
<FileChip v-for="file in filesIn('desk')" :key="file.id" :file="file" />
</Zone>
<Zone title="Images" rule="accept: 'image'" accept="image" @drop="move('images', $event)">
<FileChip v-for="file in filesIn('images')" :key="file.id" :file="file" />
</Zone>
<Zone title="Media" rule="accept: ['image', 'audio']" :accept="['image', 'audio']" @drop="move('media', $event)">
<FileChip v-for="file in filesIn('media')" :key="file.id" :file="file" />
</Zone>
<Zone title="Archive" rule="disabled: true" disabled @drop="move('archive', $event)" />
</div>
</DnDProvider>
</template>
<style scoped>
.zones {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(720px, 100%);
}
.desk {
grid-column: 1 / -1;
}
@media (max-width: 560px) {
.zones {
grid-template-columns: minmax(0, 1fr);
}
}
</style>옵션
makeDroppable의 옵션.
항목 안으로 드롭. 정렬 가능한 항목의 요소(또는 그 안)에 있는 드롭 대상은 다른 곳과 똑같이 동작하지만, 그 항목의 리스트가 드래그를 정렬하려는 동안에는 규칙이 하나 있습니다. 포인터가 항목의 가운데(리스트 축을 따라 25~75%, 그리드에서는 x)에 있을 때만 유효하며, 그곳에서는 드롭이 대상 안으로 들어가고 리스트는 그 때문에 움직이지 않습니다. 항목의 가장자리 근처에서는 리스트가 평소처럼 정렬합니다. accept가 드래그를 거부하는 대상은 제외되므로, 리스트는 다른 항목과 마찬가지로 그 항목 위에서 정렬합니다(비활성화할 필요가 없습니다). 키보드는 항목을 지나가기 전에 이런 대상에서 멈춥니다. 드래그는 자신이 옮기는 것을 대상으로 삼지 않습니다. 드래그 중인 항목 안(또는 위)에 있는 대상도, 드래그 중인 항목이 안착할 자리 안에 있는 대상도 마찬가지입니다. onDrop에서 항목을 리스트에서 빼려면 e.source.remove()를 호출하세요.
콜백을 제외한 모든 옵션은 값, ref 또는 getter를 받으며(accept, overOverlay, overDropAnimation: 값 또는 ref), 드래그가 대상을 찾는 동안 실시간으로 읽습니다.
Key값 · ref · getter기본값: useId(). 서버 렌더링과 클라이언트 렌더링 사이에서 안정적입니다.
TData값 · ref · getter대상에 대해 알릴 아무 데이터. 이벤트는 이것을 over.data로 담습니다.
string값 · ref · getter사람이 부르는 이름. 스크린 리더용 문구가 id 대신 이 이름을 읽습니다(over Trash). 이벤트에서는 over.label로 전달됩니다.
AcceptRule값 · ref이 대상이 받아들이는 것. 정렬 가능한 항목 안에서 드래그를 거부하는 대상은 리스트가 그 위에서 정렬하도록 둡니다. 값 또는 ref이며, 함수는 규칙입니다.
AcceptMode값 · ref · getter기본값 'all'.
boolean값 · ref · gettertrue: 드래그가 이 대상이 없는 것처럼 위를 지나갑니다.
number값 · ref · getter대상이 중첩 없이 겹칠 때 값이 큰 쪽이 우선합니다(기본값 0). 정렬 가능한 항목이 컨테이너보다 우선합니다.
Component값 · ref이 대상이 받는 드래그가 위에 있는 동안 오버레이가 보여 줄 것. OverlayProps를 받는 컴포넌트로, 드래그 자체의 오버레이(드래그 중인 항목의 컴포넌트, 프로바이더의 슬롯, 또는 클론) 대신 렌더링되며, 그 오버레이를 기본 슬롯으로 받아 감싸거나 뺄 수 있습니다(<slot />). 드롭이 여기에 안착하는 동안에도 남습니다. 오버레이가 없는 드래그(overlay: false)는 계속 오버레이가 없습니다. 값 또는 ref이며 실시간으로 읽습니다. 컴포넌트가 바뀔 때는 프로바이더의 overlayTransition으로 애니메이션됩니다. (draggable, 항목, 리스트에서 overlay는 드래그 자체의 오버레이입니다. 정렬 가능한 리스트와 트리도 이것을 overOverlay로 받습니다.)
DropAnimation값 · ref여기에 드롭될 때 오버레이가 안착하는 방식으로, 드래그 중인 항목과 프로바이더의 dropAnimation 대신 쓰입니다. false는 드롭한 자리에 그대로 두고(오버레이 컴포넌트 자체의 애니메이션, 예를 들어 스플래시가 그곳에서 재생됩니다), 함수는 오버레이를 애니메이션합니다. 값 또는 ref이며, 드롭할 때 읽습니다.
(event: DnDEvent) => void드래그가 이 대상 위로 왔습니다. 대상이 드래그를 받는지와 상관없습니다(event.over.accepted).
(event: DnDEvent) => void드래그가 이 대상을 떠났습니다.
(event: DnDEvent) => MaybePromise<BeforeDropResult>이 대상에 대한 드롭이 확정되기 전에, 모니터의 onBeforeDrop 다음으로 호출됩니다. 대상이 드래그를 받을 때만입니다(BeforeDropResult 참고). 비동기일 수 있습니다. 오버레이는 놓인 자리에서 기다립니다. 오류가 나면 드롭이 거부됩니다.
(event: DnDEndEvent) => void이 대상에 대한 드롭이 확정되었습니다. 그 의미대로 처리하세요(항목 이동, 파일 업로드). onBeforeDrop이 드래그된 항목 중 일부만 받았다면 event.accepted에는 그 id가, event.rejected에는 나머지 id가 들어 있으며, 나머지는 원래 자리로 돌아갑니다. active는 여전히 드래그 전체입니다.
ExternalAccept값 · ref · getter페이지 밖에서 오는 드래그를 받습니다. 데스크톱의 파일, 다른 앱이나 탭의 링크나 텍스트(브라우저의 드래그 앤 드롭). 이런 드래그는 라이브러리의 드래그와 똑같이 동작하며(isOver, isAccepting, 이벤트), 드롭할 때 e.external에 데이터가 들어 있습니다. external이 없는 대상은 이런 드래그를 무시합니다. 값, ref 또는 getter이며 실시간으로 읽습니다.
반환값
makeDroppable이 반환하는 것.
ComputedRef<Key>대상의 id: id 옵션, 또는 자동으로 만들어진 id.
ComputedRef<boolean>드래그가 위에 있습니다(external이 있으면 페이지 밖에서 온 드래그도).
ComputedRef<boolean>무언가가 드래그되고 있고 이 대상이 그것을 받아들입니다.
ComputedRef<Placement | null>대상 위에 포인터가 있는 동안, 대상의 절반 영역을 기준으로 한 포인터 위치.
accept 규칙
'*'이거나 생략하면 모두 받아들입니다. 타입이 없는 항목은 어떤 문자열 규칙에도 맞습니다(v2의 groups: []와 동일).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)함수 형태의 accept 규칙이 받는 것.
'all': 드래그 중인 모든 항목이 맞아야 합니다. 'some': 하나 이상이면 됩니다(나머지는 onBeforeDrop에서 거부할 수 있습니다).
type AcceptMode = 'all' | 'some'페이지 밖에서
페이지 밖에서 오는 드래그에서 external이 받는 것, 그리고 그런 드래그가 담고 있는 것(e.external).
파일과 다른 앱을 참고하세요.
드롭 대상, 리스트, 트리가 페이지 밖에서 오는 드래그에서 받는 것. 데스크톱의 파일, 다른 앱이나 탭의 링크나 텍스트(external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)파일. true는 모든 파일을 받습니다. 또는 <input accept>와 같은 형식으로, MIME 타입(image/*, application/pdf)과 확장자(.md)를 쉼표로 구분한 문자열이나 배열로 지정합니다. 확장자는 드롭할 때 확인합니다. 또는 파일마다 묻는 함수(false는 그 파일을 거부합니다). 폴더는 절대 받지 않습니다.
boolean한 번에 여러 파일(기본값 true). false는 두 개 이상의 파일을 드래그하면 거부합니다.
boolean링크(text/uri-list). 다른 탭에서 끌어온 주소, 페이지의 링크.
boolean일반 텍스트(text/plain). 다른 앱에서 끌어온 선택 영역.
readonly string[]받아들이는 그 밖의 MIME 타입. 다른 앱이 제공하는 그대로 적습니다.
페이지 밖에서 온 드래그(Active.external, DnDEvent.external). 드래그하는 동안 브라우저는 무엇을 담고 있는지만 알려 주고 데이터는 알려 주지 않습니다. 파일, 링크, 텍스트는 드롭할 때 옵니다(ready).
readonly string[]제공하는 MIME 타입(Files, text/uri-list, text/plain, 앱 고유의 타입).
readonly string[]파일의 MIME 타입으로, 파일마다 하나(브라우저가 알 수 없으면 '').
readonly File[]드롭할 때: 대상이 받는 파일(폴더와 거부된 파일은 제외).
readonly string[]드롭할 때: 링크(text/uri-list).
string드롭할 때: 일반 텍스트.
string드롭할 때: HTML.
(type: string) => string드롭할 때: 제공하는 모든 타입의 데이터(드롭 전, 그리고 제공하지 않는 타입이면 '').
boolean드롭되었습니다. 위의 데이터가 들어 있습니다.
string앱의 다른 창에서 끌어온 라이브러리의 항목(native): 그 항목들의 정렬 그룹 이름. 그 그룹의 리스트는 항목을 자기 리스트 중 하나에서 온 것처럼 받아들입니다. active.items에 그 항목들이 있습니다.
외부에서 온 드래그의 파일로, ExternalAccept.files에 물을 때의 형태입니다. 파일이 페이지 위에 있는 동안 브라우저는 타입만 알려 주며, name과 size는 드롭할 때 옵니다.