모니터(useDnDMonitor), 프로바이더의 이벤트, droppable의 훅은 DnDEvent를 받고, onDragEnd는
DnDEndEvent를 받습니다. 정렬 가능한 리스트와 트리는 자체 드롭 이벤트
(SortableDropEvent,
SortableTreeDropEvent)를 자신의 onBeforeDrop과 onDrop에 넘깁니다.
데모 불러오는 중…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import { describe, type LoggedEvent } from './describe';
import TaskColumn from './TaskColumn.vue';
import EventInspector from './EventInspector.vue';
const todo = ref([
{ id: 'docs', title: 'Write docs' },
{ id: 'bug', title: 'Fix #42' },
]);
const done = ref([{ id: 'ship', title: 'Ship v3' }]);
// Every event of the drag, described when it fires. A new drag starts a new log;
// moves fire every frame, so they share one entry, which keeps the latest.
const events = ref<LoggedEvent[]>([]);
let count = 0;
const record = (name: string, type: string, payload: unknown) => {
if (name === 'onDragStart') events.value = [];
const lines = describe(type, payload);
const move = name === 'onDragMove' && events.value.find((event) => event.name === name);
if (move) Object.assign(move, { lines, count: move.count + 1 });
else events.value.push({ id: ++count, name, type, lines, count: 1 });
};
</script>
<template>
<DnDProvider>
<div class="demo">
<div class="columns">
<TaskColumn id="todo" v-model="todo" :record="record" />
<TaskColumn id="done" v-model="done" :record="record" />
</div>
<EventInspector :events="events" :record="record" />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 16px;
}
.columns {
display: flex;
flex-direction: column;
gap: 10px;
width: 168px;
}
</style>DnDEvent
드래그 이벤트가 담는 것: 모니터, 프로바이더의 이벤트, 드롭 대상의 훅이 이것을 받습니다.
Active<T>현재 드래그.
Over | null드래그 아래에 있는 드롭 대상. 아무것도 없으면 null.
Coordinates모디파이어 적용 후의 뷰포트 좌표 기준 포인터.
Coordinates모디파이어 적용 후의, 드래그 시작점 기준 오프셋.
Coordinates | nullover 안에서 드래그 중인 박스의 왼쪽 위 모서리 위치. 대상의 패딩 가장자리부터 측정하고 스크롤 값을 포함합니다. 절대 위치로 배치한 항목을 드롭한 자리에 놓는 left/top 값입니다(보드 위의 메모). 아래에 아무것도 없으면 null. 오버레이 박스의 위치이며, overlay: false이면 요소 자체의 위치입니다.
DragMode드롭이 할 일: 'move', 'copy'(리스트의 pull: 'clone', 또는 리스트가 clone할 수 있는 항목에서 누른 복사 모디파이어 키), 'swap', 'insert'. 일반 드롭 대상은 이 값을 읽어 옮기는 대신 복사합니다.
DragSource드래그 중인 항목이 정렬 가능한 리스트에서 왔을 때 존재합니다.
ExternalData페이지 밖에서 온 드래그가 담고 있는 것(active.external). 데이터는 드롭할 때 옵니다.
DnDEndEvent
onDragEnd(와 대상의 onDrop)가 받는 것: 드롭의 이벤트와 그 결과.
boolean드래그가 모든 드롭 대상 바깥에서 끝나면 false.
Key[]onBeforeDrop이 수락한 id(일부를 반환하지 않았다면 드래그 중인 모든 id).
Key[]나머지 드래그된 id: onBeforeDrop이 제외한 것으로, 원래 자리로 돌아갑니다. 모두 받았으면 비어 있습니다.
'move' | 'copy' | 'link'페이지 밖으로 나간 드래그(native)가 다른 곳에 드롭되었을 때, 그곳이 그 드래그로 한 일. 'move'는 이쪽의 정렬 가능한 리스트에서 항목을 빼고, 'copy'와 'link'는 그대로 둡니다.
onBeforeDrop 응답
onBeforeDrop이 결정하는 것:
'accept'(또는true, 또는 아무것도 반환하지 않음): 드롭이 완료됩니다.'reject'(또는false): 드롭하지 않고, 항목은 원래 자리로 돌아갑니다.- id 목록: 해당 항목만 수락하고, 나머지는 원래 자리로 돌아갑니다.
'continue': 드롭하지 않고 드래그가 계속됩니다. 포인터에서는 항목이 다시 포인터를 따라가며(버튼을 누르지 않은 상태), 다음에 놓는 동작인 클릭이 드롭합니다. 터치에서는 다시 집고, 키보드에서는 이전처럼 옮깁니다. Escape로 취소합니다. 다음 드롭에서onBeforeDrop을 다시 호출합니다.
type BeforeDropResult = boolean | void | Key[] | 'accept' | 'reject' | 'continue'드롭 결정하기를 참고하세요.
활성 드래그
진행 중인 드래그: 드래그가 시작된 항목과, 드래그가 옮기는 모든 항목.
Key드래그가 시작된 항목의 id.
Key[]드래그 중인 모든 id. 주 항목이 맨 앞입니다(멀티 드래그).
DragItem<T>[]드래그 중인 모든 항목. 주 항목이 맨 앞입니다.
unknown드래그가 시작된 항목의 data.
string드래그가 시작된 항목의 label(사람이 부르는 이름).
string[]드래그가 시작된 항목의 정규화된 type. 비어 있으면 어떤 드롭 대상에도 맞습니다.
HTMLElement드래그가 시작된 요소. DOM에서 분리될 수 있습니다(가상 리스트, 리스트 사이 이동).
Rect드래그 시작 시점의 element 레이아웃 사각형.
SensorType드래그가 움직이는 방식: 'pointer'는 좌표를 따라가고, 'keyboard'는 항목 단위로 움직입니다(SensorActivation.type).
ExternalData페이지 밖에서 온 드래그(파일, 링크, 텍스트, 또는 앱의 다른 창에서 온 항목)가 담고 있는 것. 이 드래그의 items는 드래그를 위해 만들어집니다(element는 대역입니다).
boolean브라우저 자체의 드래그(native, 또는 외부에서 온 드래그). 드래그되는 이미지는 브라우저가 그리며, 오버레이는 없습니다.
드래그 중인 항목 하나: 드래그가 시작된 항목, 또는 멀티 드래그의 다른 항목.
대상
드래그 아래에 있는 드롭 대상.
출처
드래그 중인 항목이 온 곳(그곳이 정렬 가능한 리스트일 때).
드롭이 하는 일: 'move', 'copy'(항목은 그대로 있고 복사본이 들어갑니다), 'swap'(behavior: 'swap': 두 항목이 자리를 바꿉니다), 또는 'insert'(일반 draggable이 리스트의 createItem이 만든 항목으로 리스트에 들어갑니다).
type DragMode = 'move' | 'copy' | 'swap' | 'insert'