import { defineSensor, useSensor, pointerSensor, keyboardSensor } from '@vue-dnd-kit/core';
SensorPointer Events를 통한 마우스, 터치, 펜. 기본으로 sensors에 들어 있습니다.
SensorSpace/Enter, 화살표 키, Escape(프로바이더의 keyboard 옵션으로 다시 지정할 수 있습니다). 기본으로 sensors에 들어 있으며, keyboard: false여도 Escape로 포인터 드래그와 직접 만든 드래그를 취소합니다.
(sensor: Sensor) => Sensor센서를 정의합니다(Sensor 참고). 타입만 도와줄 뿐이며 인자를 그대로 반환합니다.
(sensor: Sensor) => void위에 있는 프로바이더에서 프로바이더의 sensors와 나란히 센서를 실행합니다. 호출한 컴포넌트(또는 effect scope)가 살아 있는 동안 유지됩니다. 언마운트되면 그 드래그는 취소됩니다.
센서가 알리는 것은 "이 항목을 여기서부터 드래그"라는 요청, 그다음 어디로 움직였는지, 그리고 드롭했는지 취소되었는지뿐입니다. 나머지(무엇을 드래그할 수 있는지, 활성화, 한 번에 하나의 드래그)는 프로바이더가 검사합니다. 센서와 프로그래밍 방식 드래그를 참고하세요.
아래에서는 작은 커스텀 센서(useSensor로 실행)가 프로바이더의 기본 센서와 함께, 미니맵에서 보드 위의
도형을 드래그합니다.
데모 불러오는 중…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import SensorDesk from './SensorDesk.vue';
</script>
<template>
<DnDProvider>
<SensorDesk />
</DnDProvider>
</template>Sensor
드래그를 시작하는 입력: 포인터, 키보드, 또는 직접 만든 입력(게임패드, 화면 위 조이스틱, 음성, 스크립트로 하는 드래그). setup은 프로바이더마다 한 번, 브라우저에서만, 프로바이더와 함께 끝나는 effect scope 안에서 실행됩니다(센서가 sensors에서 빠지거나, useSensor를 호출한 컴포넌트가 언마운트될 때도 끝납니다). 리스너는 useEventListener로 등록하거나 정리 함수를 반환하세요. 그때 아직 진행 중인 드래그는 취소됩니다.
센서를 감싸려면 직접 만든 컨텍스트로 그 센서의 setup을 실행하세요. Object.create(context, { activate: { value: … } })는 실시간 getter(status, drag, props)를 유지합니다. 스프레드는 이 값을 고정해 버립니다.
센서가 실행되는 프로바이더에게서 받는 것.
Readonly<DnDProviderProps>프로바이더의 props(예: activation, keyboard). 바뀔 수 있으므로 필요할 때 읽으세요.
DnDStatus어떤 센서가 드래그를 진행하든, 프로바이더의 드래그 상태.
SensorDrag | null어떤 센서가 시작했든, 대기 중이거나 진행 중인 프로바이더의 드래그. 없으면 null. 센서는 서로의 드래그를 조종할 수 있습니다. 키보드 센서는 모든 키보드 드래그를 움직이고 드롭합니다. 예를 들어 "Move" 버튼이 집은 드래그도 그렇습니다(@vue-dnd-kit/actions).
(activation: SensorActivation) => SensorDrag | null항목 드래그를 요청합니다. 프로바이더는 자신이 유휴 상태인지(한 번에 하나의 드래그, 드롭이 안착하는 중에는 불가), 대상이 비활성 상태가 아닌 자신의 draggable인지, 입력이 닿은 곳(target 참고)과 draggable의 canDrag를 검사한 다음, 활성화 조건을 기다려 드래그를 시작합니다. 드래그(대기 중, 또는 기다릴 것이 없으면 이미 진행 중)를 반환하며, 드래그를 시작할 수 없으면 null을 반환합니다.
() => void어떤 센서가 진행하든, 프로바이더의 드래그나 대기 중인 활성화를 취소합니다(Escape, 숨겨진 탭).
활성화
센서의 입력이 드래그하려 할 때 센서가 요청하는 내용(SensorContext.activate()).
Element | Key입력이 닿은 곳: draggable 안의 요소, 또는 draggable의 id. 요소는 이 프로바이더에 속해야 합니다. 'pointer' 드래그에서는 핸들이 있으면 핸들 위에 있어야 하고 상호작용 자식 요소(버튼, 입력 필드) 위에 있으면 안 됩니다. 'keyboard' 드래그에서는 draggable의 포커스 대상(핸들, 없으면 draggable 자체)이어야 하며 편집 가능한 필드면 안 됩니다. id를 넘기면 이 검사를 건너뜁니다. 입력이 어디에 있었든 드래그는 그 항목에서 시작합니다.
SensorType드래그가 움직이는 방식. 'pointer'(기본값): move()에 넘긴 지점을 따라가고, 그 지점에서 대상을 히트 테스트하며, 컨테이너는 가장자리에서 자동 스크롤되고, 페이지는 움켜쥔 손 커서를 보여 줍니다. 'keyboard': 화살표 키처럼 step()과 place()로 항목 단위로 움직이고, 대상은 자동 스크롤 대신 보이도록 스크롤되며, 끝나면 포커스가 항목으로 돌아갑니다. Active.sensor로 어느 쪽인지 알 수 있습니다.
Coordinates드래그가 시작되는 위치(뷰포트 좌표). 기본값: draggable의 중앙.
PointerEvent | KeyboardEvent입력 이벤트. draggable의 canDrag에 전달됩니다. 이벤트가 없으면(게임패드, 프로그래밍 방식 드래그) canDrag를 호출하지 않습니다. pointerType이 'touch'이면 터치 드래그(haptics)가 됩니다.
PointerKind | ActivationConstraint드래그가 시작되기 전에 기다리는 조건(그때까지 useDnD().status는 진행률과 함께 'activating'입니다). 포인터 종류를 넘기면 draggable의 activation 옵션, 그다음 프로바이더의 설정, 그다음 기본값(마우스는 4px, 핸들에서는 즉시. 펜은 4px. 터치는 허용 범위 5px의 200ms 길게 누르기)을 읽습니다. 조건 객체는 그대로 사용합니다. 기본값: 없음, 드래그가 바로 시작됩니다.
(drag: SensorDrag) => void활성화 후 드래그가 시작되었습니다. 예: 포인터 캡처.
(drag: SensorDrag) => void드래그가 끝났습니다. 활성화가 중단되었거나, (누구에 의해서든) 드롭 또는 취소되었습니다.
(drag: SensorDrag) => void센서가 요청한 드롭이 일어나지 않고 드래그가 계속됩니다(onBeforeDrop이 'continue'로 응답). move, drop, cancel을 다시 쓸 수 있습니다. 포인터 센서는 다음에 놓을 때까지 항목이 포인터를 따라가게 합니다.
포인터 종류별 설정. 기본값: 마우스 { distance: 4 }(핸들에서는 즉시), 펜 { distance: 4 }, 터치 { delay: 200, tolerance: 5 }.
type ActivationOptions = Partial< Record<PointerKind, ActivationConstraint> >누르기가 드래그가 되기 전에 충족해야 하는 조건: distance만큼 움직이거나 delay 동안 누르고 있기 중 먼저 오는 쪽. 아무것도 설정하지 않으면 드래그가 바로 시작됩니다.
드래그
activate()부터 끝날 때까지의 센서 드래그 하나. 더 이상 적용되지 않는 호출은 모두 무시됩니다. 시작 전이나 끝난 뒤의 이동, 두 번째 drop() 같은 경우입니다.
Key드래그 중인 항목의 id.
SensorType드래그가 움직이는 방식. activate()가 요청한 대로입니다(SensorActivation.type).
SensorDragState드래그의 단계: 활성화를 기다리는 중, 드래그 중, 또는 끝남.
boolean드래그가 시작되었습니다. 이후 끝났더라도 마찬가지입니다(포인터 센서는 드래그 뒤에 따라오는 클릭을 삼킵니다).
(point: Coordinates) => void입력이 움직였습니다. 대기 중에는 활성화 조건을 검사하고(허용 범위를 넘어 움직이면 중단됩니다), 드래그 중에는 드래그가 그곳으로 갑니다. 포인터 드래그는 프레임당 위치 하나를 받고, 키보드 드래그는 앞선 단계 다음에 즉시 움직입니다.
(direction: SensorDirection, options?: SensorStepOptions) => Promise<void>키보드 드래그: 키보드 센서의 화살표 키처럼 한 단계 움직입니다(리스트의 다음 항목, 'droppables' 모드에서 받아들이는 다음 대상, 또는 keyboard.step 픽셀). 단계는 대기열에 쌓입니다. 각 단계는 앞 단계가 렌더링된 뒤 실행되며, 아직 처리 중인 단계가 있는 동안 반복 키(event.repeat)는 건너뜁니다. 포인터 드래그에서는 무시됩니다.
(position: SortablePosition) => Promise<boolean>키보드 이동처럼 항목을 정렬 가능한 리스트의 특정 위치에 놓고(다른 리스트는 받아들일 때만 받습니다), 드래그를 새 자리로 옮깁니다. 그 위치에서 받아들이는 리스트가 없으면 false로 resolve됩니다. 키보드 드래그에서는 step()처럼 대기열에 쌓입니다.
() => Promise<boolean>드롭합니다. 대기 중인 활성화라면 대신 중단합니다. 드래그가 끝나고 안착하면 resolve됩니다. 드롭이 완료되면 true, (대상이나 onBeforeDrop이) 거부했거나 드롭할 것이 없었으면 false입니다.
() => void드래그를 취소하거나(항목은 원래 자리로 돌아갑니다), 대기 중인 활성화를 중단합니다.
'pending': 활성화 조건을 기다리는 중.'dragging': 시작부터 드롭이 결정되거나 드래그가 취소될 때까지.'ended': 활성화가 중단되었거나, 드래그가 센서 또는 다른 무언가(Escape, 숨겨진 탭,useDnD().cancel(), 프로바이더 언마운트)에 의해 드롭되거나 취소되었습니다.
type SensorDragState = 'pending' | 'dragging' | 'ended'SensorDrag.step()의 옵션.
키보드 한 단계의 화살표 방향.
type SensorDirection = 'up' | 'down' | 'left' | 'right'