function makeDragArea( target: MaybeElementRef, options?: DragAreaOptions,): DragAreaReturn;요소를 드래그 영역으로 만듭니다. 그 안에서 시작되는 드래그(draggable과 정렬 가능한 항목)는 그 영역의 규칙을 따릅니다(DragAreaOptions 참고). 그러면 프로바이더 하나로 앱 전체를 맡을 수 있고, 보드, 캔버스, 피드가 각자 자기 방식으로 드래그합니다. 영역이 중첩되면 가장 가까운 영역이 우선합니다.
const board = useTemplateRef<HTMLElement>('board');
makeDragArea(board, { restrictToArea: true, modifiers: [snapToGrid(24)] });
안쪽 영역은 disabled를 상속합니다. 그 밖의 규칙은 모두 가장 가까운 영역에서 가져옵니다.
축, 경계, 그리드를 참고하세요.
영역 안의 칩은 영역의 규칙을 따르고, 영역 밖의 칩은 자유롭게 드래그됩니다.
데모 불러오는 중…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import AreaDesk from './AreaDesk.vue';
</script>
<template>
<!-- One provider for everything: the area changes the rules only for the drags that start in it. -->
<DnDProvider>
<AreaDesk />
</DnDProvider>
</template>옵션
makeDragArea의 옵션: 영역 요소 안에서 시작하는 드래그(draggable과 정렬 가능한 항목 모두)의 규칙입니다. 덕분에 프로바이더 하나로 앱 전체를 처리하면서도 페이지 일부는 자기 방식대로 드래그할 수 있습니다. 영역이 중첩되면 가장 가까운 영역이 우선합니다.
모든 옵션은 값, ref, getter를 받으며 필요할 때 읽습니다. 누르기가 시작될 때(activation, disabled) 또는 드래그가 시작될 때입니다.
'x' | 'y'값 · ref · getter모디파이어 다음에 드래그를 한 축에 고정합니다. draggable 자체(또는 그 리스트)의 axis가 우선합니다.
Modifier[]값 · ref · getter드래그에 적용할 모디파이어. 프로바이더의 모디파이어 다음, draggable 자체(또는 그 리스트)의 모디파이어 전에 실행됩니다. 예: 보드에는 [snapToGrid(20)].
boolean값 · ref · gettertrue: 드래그가 영역 요소 안에 머뭅니다(모디파이어 다음, 축 고정 전).
boolean | AutoScrollOptions값 · ref · getter영역의 스크롤 컨테이너(요소 자체, 또는 가장 가까운 스크롤 가능한 조상)에 대해 프로바이더의 autoScroll을 재정의합니다. false면 그곳에서 끕니다. 다른 옵션과 달리, 어디서 시작했든 그 컨테이너를 스크롤하는 모든 드래그에 적용됩니다.
ActivationOptions값 · ref · getter포인터 종류별 드래그 활성화. draggable 자체의 설정(우선함)과 프로바이더의 설정 사이에 적용됩니다. 예: 스크롤되는 피드에서 더 긴 터치 누르기.
boolean값 · ref · gettertrue: 영역 안에서, 그리고 그 안의 영역에서도 드래그가 시작되지 않습니다(가장 가까운 영역의 값을 쓰는 다른 옵션과 다릅니다). 영역의 draggable은 aria-disabled를 알립니다.
반환값
makeDragArea가 반환하는 것.
ComputedRef<boolean>이 영역에서 시작한 드래그가 진행 중입니다(드롭이 결정될 때까지).
ComputedRef<boolean>자동 스크롤이 영역의 스크롤 컨테이너(요소, 또는 가장 가까운 스크롤 가능한 조상)를 움직이는 중입니다.