반응하는 옵션
대부분의 옵션은 값, ref, getter를 받으며, 필요할 때 읽습니다. 변경은 늦어도 다음 드래그부터 적용됩니다. 표에서는 이런 옵션을 값 · ref · getter로 표시합니다.
라이브러리가 읽기만 하는 값, getter, 또는 모든 종류의 ref(쓰기 가능, shallow, computed, readonly — 예: useTemplateRef의 반환값). Vue의 MaybeRefOrGetter와 달리, string | number가 필요한 곳에 Ref<string>도 받습니다.
type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)값 또는 모든 종류의 ref. 함수 자체가 하나의 값인 옵션(오버레이 컴포넌트, accept 규칙, 커스텀 애니메이션)에 쓰이며, 그래서 getter와 구별할 수 없습니다. 컴포넌트는 shallowRef(또는 computed)에 담으세요. Vue가 컴포넌트를 반응형으로 만들면 안 됩니다.
type MaybeReadonlyRef = T | Readonly<Ref<T>>요소
컴포저블이 다루는 요소(makeDraggable(target)): 요소 자체, 템플릿 ref(useTemplateRef), 또는 getter. 바뀌어도 됩니다(v-if). 라이브러리가 따라갑니다.
type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>요소: HTML 또는 SVG 요소, 또는 컴포넌트 인스턴스(그 루트 요소 $el). 템플릿 ref가 주는 것과 같습니다. 아직 없을 때(마운트 전)는 null 또는 undefined입니다.
type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefinedkey와 기하 정보
id 또는 key: draggable, 드롭 대상, 리스트, 리스트 항목의 것.
type Key = string | number점 또는 오프셋(px): 뷰포트 왼쪽 위 모서리로부터의 위치, 또는 드래그가 시작된 곳으로부터의 오프셋(delta, transform).
뷰포트 좌표의 박스(px). getBoundingClientRect()가 주는 것과 같습니다.
상태
프로바이더가 하고 있는 일:
'idle': 아무것도 하지 않습니다.'activating': 누르기가 활성화 조건(거리, 길게 누르기)을 기다립니다.'dragging': 드래그가 진행 중입니다.'dropping': 드롭을 결정하는 중이거나(비동기onBeforeDrop), 오버레이가 아직 안착하는 중입니다.'selecting': 선택 영역이 사각형을 그리고 있습니다.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'어떤 센서가 조종하든 드래그가 움직이는 방식(SensorActivation.type): 'pointer'는 지점을 따라가고, 'keyboard'는 항목 단위로 움직입니다.
type SensorType = 'pointer' | 'keyboard'누른 포인터의 종류(PointerEvent.pointerType): 활성화는 종류별로 설정합니다.
type PointerKind = 'mouse' | 'touch' | 'pen'값, 또는 그 값의 promise: 비동기일 수 있는 훅이 반환하는 것(onBeforeDrop).
type MaybePromise = T | Promise<T>