function makeSortableTree<T>( target: MaybeElementRef, options: SortableTreeOptions<T>,): SortableTreeReturn<T>;컨테이너를 정렬 가능한 트리로 만듭니다. 반환된 items(초안 순서의 보이는 노드, depth만큼 들여 씀)를 makeSortableItem을 호출하는 행 컴포넌트로 렌더링하세요. 드롭하면 onDrop 다음에 옮겨진 노드(하위 트리 포함)가 options.items에 기록됩니다. 단, event.preventDefault()로 event.result를 직접 처리하는 경우는 예외입니다.
const root = useTemplateRef<HTMLElement>('root');
const { items } = makeSortableTree(root, { items: files, indentation: 20, collapsed });
각 행은 id: () => node.key로 makeSortableItem을 호출합니다. 트리를 참고하세요.
데모 불러오는 중…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import FileTree from './FileTree.vue';
</script>
<template>
<DnDProvider>
<FileTree />
</DnDProvider>
</template>옵션
makeSortableTree의 옵션. 멀티 드래그는 선택된 노드를 각자의 하위 트리와 함께 하나의 블록으로, 한 위치와 깊이로 (문서 순서대로) 옮깁니다. 선택된 노드 안의 다른 선택된 노드는 그 하위 트리에 실려 함께 갑니다. 집은 노드도 마찬가지입니다(VS Code처럼). 집은 노드는 자신이 속한 선택된 노드 안에 그대로 있고, 그 노드가 하위 트리와 함께 움직이며, 오버레이는 집은 행에 남습니다. canNest와 maxDepth는 블록 전체에 적용됩니다.
나머지 옵션은 makeSortableList에서와 같은 의미입니다. 값, ref, getter를 받으며(overlay, overOverlay, animation, dropAnimation, overDropAnimation: 값 또는 ref) 트리가 필요할 때 읽으므로, 변경은 늦어도 다음 드래그부터 적용됩니다. 예외: id와 group은 트리가 만들어질 때 한 번만 읽습니다. items는 모델 자체입니다. 함수(getKey, getChildren, setChildren, canNest, clone, createItem, 콜백)는 그대로 넘깁니다.
SortableItems<T>루트 노드. 쓰기 가능한 ref: 드롭할 때 라이브러리가 바뀐 노드에 새 자식을 주고(setChildren) 새 루트 배열을 기록합니다. 읽기 전용 소스(getter, readonly ref, computed): event.preventDefault()를 호출하고 event.result를 직접 적용하세요(SortableListOptions.items와 같습니다).
(node: T) => Key기본값: node.id. makeSortableItem({ item }), 복사본, 새로 만든 노드의 key도 이것으로 정합니다.
(node: T) => T[]노드의 자식. 기본값: node.children.
(node: T, children: T[]) => void기본 기록이 노드에 새 자식을 주는 방법. 기본값: node.children = children.
(node: T, children: T[]) => Tevent.result를 위한, children을 가진 node의 복사본. 원본 노드를 그대로 두는 새 트리입니다(기본 기록은 여전히 setChildren을 거칩니다). 기본값: setChildren으로 자식을 준 { ...node }(setChildren이 없으면 { ...node, children }). 클래스 인스턴스나 얕은 복사로는 부족한 노드에는 이 함수를 넘기세요.
Key기본값: useId(). 서버 렌더링과 클라이언트 렌더링 사이에서 안정적입니다. 한 번만 읽습니다.
string값 · ref · getter사람이 트리를 부르는 이름. 스크린 리더용 문구가 id 대신 이 이름을 읽습니다.
unknown값 · ref · getter드롭 대상으로서의 트리에 대해 알릴 아무 데이터. 드래그가 위에 있는 동안 이벤트는 이것을 over.data로 담습니다.
ActivationOptions값 · ref · getter이 트리의 행을 눌렀을 때 드래그가 시작되는 방식으로, 프로바이더의 activation 대신 쓰입니다(행 자체의 설정이 우선합니다).
Component값 · ref이 트리 행의 오버레이 컴포넌트(행 자체의 overlay가 우선합니다). 드래그 중에 바꾼 ref는 바로 교체됩니다.
Component값 · ref이 트리가 받는 드래그가 위에 있는 동안 오버레이가 보여 줄 것(SortableListOptions.overOverlay 참고). 오버레이의 to prop은 드롭이 어디에 중첩될지 알려 줍니다.
DropAnimation값 · ref이 트리 행의 드래그가 끝날 때 오버레이가 안착하는 방식(SortableListOptions.dropAnimation 참고).
DropAnimation값 · ref이 트리에 드롭될 때 오버레이가 안착하는 방식(SortableListOptions.overDropAnimation 참고).
Modifier[]값 · ref · getter이 트리 행의 드래그에 적용할 모디파이어. 프로바이더의 modifiers 다음에 적용됩니다(행 자체의 modifiers가 우선합니다). 예: [restrictToVerticalAxis]. 드래그가 시작될 때 읽습니다. 축을 고정해도 중첩은 됩니다. 이때 깊이는 행 가운데에 머무르는 것으로 정해집니다.
'x' | 'y'값 · ref · getter모디파이어 다음에 이 트리 행의 드래그를 한 축에 고정합니다(행 자체의 axis가 우선합니다). 'y'여도 행은 여전히 중첩됩니다. 이때 깊이는 행 가운데에 머무르는 것으로 정해집니다. 드래그가 시작될 때 읽습니다.
string | SortableGroupOptions<T>그룹 이름이 같은 리스트와 트리끼리 항목을 주고받습니다. 기본값: 별도의 그룹. 한 번만 읽습니다.
AcceptMode값 · ref · getter여러 타입의 항목을 멀티 드래그할 때: 'all'(기본값) 또는 'some'이 수락되어야 합니다(group.put).
number값 · ref · getter깊이 한 단계당 가로 오프셋(픽셀). 기본값 24.
TreeNesting값 · ref · getter깊이를 정하는 방법: 가로 오프셋, 행 가운데에 머무르기, 또는 둘 다(기본값).
SortablePlaceholder값 · ref · getter'item'(기본값): 드래그 중인 노드가 투영된 깊이로 행 사이를 움직입니다. 'indicator': 트리가 움직이지 않고, indicator(트리와 각 행의 makeSortableItem에 있음)가 드롭될 위치를 depth, parentKey와 함께 알려 주며, 선은 직접 그립니다. 이때 바깥에 드롭하면 취소됩니다.
number값 · ref · getter허용되는 가장 깊은 깊이(루트는 0). 드래그 중인 노드 자신의 자손도 포함됩니다.
(node: T, parent: T) => booleannode가 parent 아래로 갈 수 있는지. 멀티 드래그에서는 드래그 중인 모든 노드에 대해 묻습니다.
ReadonlySet<Key>값 · ref · getter자식이 숨겨진 노드의 key.
(node: T) => T복사본을 만듭니다(group.pull: 'clone', 복사 모디파이어 키). 복사하려면 필수입니다. 하위 트리 전체를 포함한 복사본을 반환하세요. 복사한 폴더는 자식을 유지합니다. 트리의 모든 노드처럼, 복사본과 그 모든 자손에는 각자의 key(getKey로 읽음)가 필요합니다.
(active: Active) => T외부의 일반 draggable을 받아들입니다. 투영된 위치와 깊이에 삽입할 노드를 만듭니다(canNest와 maxDepth가 적용됩니다). 키보드에서는 트리 쪽 화살표 키를 누르면 draggable이 그 앞에 들어갈 행과 같은 단계로 트리에 들어가고, 이후 화살표 키로 다른 노드처럼 옮길 수 있습니다. 페이지 밖에서 온 드래그(external)에 대해서는 드래그하는 동안과 드롭할 때 두 번 호출됩니다(리스트의 createItem 참고). 파일마다 자식이 하나씩 있는 폴더 노드라면 여러 파일을 담을 수 있습니다.
ExternalAccept값 · ref · getter페이지 밖에서 오는 드래그를 createItem과 함께 받습니다. 파일, 링크, 텍스트(ExternalAccept 참고). 앱의 다른 창에서 끌어온 같은 그룹의 노드는 노드 자체로 들어옵니다. 값, ref 또는 getter이며 실시간으로 읽습니다.
DropOutside값 · ref · getter모든 대상 바깥에 드롭할 때: 플레이스홀더가 있는 곳에 노드를 두거나, 취소하거나, 제거합니다. 기본값 'placeholder'(placeholder: 'indicator'일 때는 'cancel'). 드롭할 때 읽습니다.
LayoutAnimation값 · ref이 트리의 FLIP 애니메이션. 기본값: 프로바이더의 animation. 값 또는 ref(함수는 커스텀 애니메이션입니다).
AutoAnimation값 · ref · getterSortableListOptions와 같으며, 보이는 행에 적용됩니다: 추가, 제거, 이동된 노드, 그리고 노드를 펼치거나 접을 때(collapsed) 보이거나 숨겨지는 행.
boolean값 · ref · getter트리 자체의 크기도 리스트처럼 행을 따라갑니다(animateSize). 기본값 true.
boolean | AutoScrollOptions값 · ref · getter이 트리의 스크롤 컨테이너에 대해 프로바이더의 autoScroll을 재정의합니다. 드래그가 시작될 때 읽습니다.
MaybeElementRefSortableListOptions와 같습니다. 트리 대신 드롭을 받는 요소이며, 기본값은 트리 자체의 요소입니다.
boolean값 · ref · gettertrue: 행을 드래그할 수 없고, 항목을 받지도 않습니다.
( event: SortableTreeDropEvent<T>, ) => MaybePromise<BeforeDropResult>SortableListOptions와 같습니다.
(event: SortableTreeDropEvent<T>) => voidSortableListOptions와 같습니다. 기록 전에 호출되며, event.preventDefault()로 기록을 건너뜁니다.
반환값
makeSortableTree가 반환하는 것.
Key트리의 id: id 옵션, 또는 자동으로 만들어진 id.
ComputedRef<FlatNode<T>[]>초안 순서의 보이는 노드. 활성 노드는 투영된 깊이를 가집니다.
ComputedRef<TreeProjection | null>활성 노드가 안착할 위치. 이 트리에 없으면 null.
ComputedRef<SortableIndicator | null>인디케이터 모드: 드롭될 위치와 그 depth, parentKey. 여기가 아니면 null.
ComputedRef<boolean>드래그가 트리 위에 있습니다.
ComputedRef<boolean>무언가가 드래그되고 있고 이 트리가 그것을 받아들입니다.
ComputedRef<Key | null>가상화 라이브러리가 마운트 상태로 유지해야 하는 행. 자리가 이 트리 안에 있는 동안에는 그 자리(드래그 중인 노드, 집은 노드를 싣고 가는 선택된 노드, 복사본, 새로 만든 노드), 아니면 드래그 중인 노드입니다.
ComputedRef<number>items에서 activeKey의 인덱스. 여기에 없으면 -1.
ComputedRef<Size | null>드래그 시작 시점의 드래그 중인 행 크기.
() => void라이브러리가 일으키지 않은 레이아웃 변경을 애니메이션합니다(예: 가상화 라이브러리의 재측정).
평평한 노드
트리의 보이는 노드. 트리의 items에 나열된 그대로입니다. 순서대로 렌더링하고 depth만큼 들여 쓰세요.
투영
트리 드래그가 깊이를 정하는 방식: 'offset'은 옆으로 얼마나 움직였는지로(단계당 indentation), 'hover'는 행의 가운데에 올려서 정하며 그 행이 드래그를 자식으로 받습니다. 'both'는 둘 다입니다.
type TreeNesting = 'offset' | 'hover' | 'both'드롭 이벤트
트리의 드롭 이벤트. index는 parentKey 아래 형제 사이에서의 위치입니다(from: 이동 전, to: 이동 후, 노드가 이미 이전 자리에서 빠진 상태). from.parentKey는 루트 노드와 다른 리스트에서 온 항목이면 null입니다. 멀티 드래그는 keys(각각 하위 트리 포함)를 나란히 옮깁니다. from은 드래그를 이끄는 노드(집은 노드, 또는 그 노드를 싣고 가는 선택된 노드)가 있던 곳이고, to는 그중 첫 번째가 안착하는 곳입니다. 복사(mode: 'copy')는 노드를 제자리에 두고 그 복사본인 items를 삽입하며, 일반 draggable(mode: 'insert')은 createItem이 만든 노드를 삽입합니다.