function makeSortableTree<T>( target: MaybeElementRef, options: SortableTreeOptions<T>,): SortableTreeReturn<T>;让容器成为可排序树。用调用 makeSortableItem 的行组件渲染返回的 items（草稿顺序中的可见节点，按 depth 缩进）。放置时，在 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、只读 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[]) => T带有 children 的 node 副本，用于 event.result：一棵保留你原有节点不变的新树（默认写入仍通过 setChildren 完成）。默认：通过 setChildren 设置了子节点的 { ...node }（没有 setChildren 时为 { ...node, children }）。对于类实例，以及需要比浅拷贝更多处理的节点，传入它。
Key默认：useId()，在服务端和客户端渲染之间保持稳定。只读取一次。
string值 · ref · getter人们对树的称呼：屏幕阅读器文本会说出它，而不是树的 id。
unknown值 · ref · getter关于这棵树作为放置目标的任何信息：拖拽位于它上方时，事件以 over.data 携带它。
ActivationOptions值 · ref · getter在这棵树的行上按下时如何开始拖拽，替代 provider 的 activation（行自己的优先）。
Component值 · ref这棵树中行的浮层组件（行自己的 overlay 优先）。在拖拽过程中切换的 ref 会立即替换它。
Component值 · ref当这棵树接受的拖拽位于它上方时浮层显示什么（见 SortableListOptions.overOverlay）。它的 to prop 说明放置会嵌套到哪里。
DropAnimation值 · ref这棵树中行的拖拽结束时浮层如何落位（见 SortableListOptions.dropAnimation）。
DropAnimation值 · ref浮层被放进这棵树时如何落位（见 SortableListOptions.overDropAnimation）。
Modifier[]值 · ref · getter这棵树中行的拖拽修饰器，在 provider 的 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接收来自外部的普通可拖拽元素：在预测的位置和深度创建要插入的节点（canNest 和 maxDepth 对它同样适用）。使用键盘时，朝树的方向按方向键即可把可拖拽元素放进来，与它将插入其前方的那一行平齐，之后方向键会像移动其他节点一样移动这个节点。来自页面之外的拖拽（external）会被询问两次，拖拽进行时和放置时各一次（见列表的 createItem）；一个为每个文件带一个子节点的文件夹节点可以容纳多个文件。
ExternalAccept值 · ref · getter接收来自页面之外的拖拽：文件、链接、文本（见 ExternalAccept），配合 createItem。从应用另一个窗口拖进来的同一分组的节点以自身进入。值、ref 或 getter，实时读取。
DropOutside值 · ref · getter放在所有目标之外时：把节点留在占位所在的地方、取消，或者移除它们。默认为 'placeholder'（使用 placeholder: 'indicator' 时为 'cancel'）。在放置时读取。
LayoutAnimation值 · ref这棵树的 FLIP 动画；默认：provider 的 animation。值或 ref（函数即自定义动画）。
AutoAnimation值 · ref · getter与 SortableListOptions 中相同，作用于可见的行：被添加、删除或移动的节点，以及节点展开或折叠时显示或隐藏的行（collapsed）。
boolean值 · ref · getter树自身的尺寸跟随它的行，与列表一样（animateSize）。默认 true。
boolean | AutoScrollOptions值 · ref · getter为这棵树的滚动容器覆盖 provider 的 autoScroll。在拖拽开始时读取。
MaybeElementRef与 SortableListOptions 中相同：替树接收放置的元素，默认是树自己的元素。
boolean值 · ref · gettertrue：它的行不能被拖拽，它也不接受任何项。
( event: SortableTreeDropEvent<T>, ) => MaybePromise<BeforeDropResult>与 SortableListOptions 中相同。
(event: SortableTreeDropEvent<T>) => void与 SortableListOptions 中相同：在写入之前调用，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>activeKey 在 items 中的索引，不在这里时为 -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，即它们的副本；普通可拖拽元素（mode: 'insert'）则插入 createItem 创建的节点。