Documentação/API
makeSortableTree
Torna um contêiner uma árvore ordenável, renderizada de forma plana com profundidades — aninhamento arrastando para o lado ou pairando sobre um nó.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
function makeSortableTree<T>( target: MaybeElementRef, options: SortableTreeOptions<T>,): SortableTreeReturn<T>;Torna um contêiner uma árvore ordenável. Renderize os items retornados (os nós visíveis na ordem do rascunho, recuados conforme depth) com um componente de linha que chama makeSortableItem. No drop, depois de onDrop, os nós movidos (com as suas subárvores) são escritos em options.items, a menos que event.preventDefault() deixe event.result com você.
const root = useTemplateRef<HTMLElement>('root');
const { items } = makeSortableTree(root, { items: files, indentation: 20, collapsed });
Cada linha chama makeSortableItem com id: () => node.key.
Veja Árvores.
Carregando a demo…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import FileTree from './FileTree.vue';
</script>
<template>
<DnDProvider>
<FileTree />
</DnDProvider>
</template>Opções
Opções de makeSortableTree. Um multi-drag move os nós selecionados como um único bloco, cada um com a sua subárvore, para um mesmo lugar e profundidade (na ordem do documento); um nó selecionado dentro de outro selecionado vai junto na subárvore dele. Isso vale também para o nó pego (como no VS Code): ele fica dentro do nó selecionado em que está, que se move com a sua subárvore, enquanto o overlay fica na linha pega. canNest e maxDepth se aplicam ao bloco inteiro.
As outras opções significam o mesmo que em makeSortableList. Elas aceitam um valor, um ref ou um getter (overlay, overOverlay, animation, dropAnimation, overDropAnimation: um valor ou um ref) e são lidas quando a árvore precisa delas, então uma mudança vale, no máximo, a partir do próximo arraste. Exceções: id e group são lidos uma única vez, quando a árvore é criada; items é o próprio model; funções (getKey, getChildren, setChildren, canNest, clone, createItem, os callbacks) são passadas como estão.
SortableItems<T>Os nós raiz. Um ref gravável: no drop, a biblioteca dá aos nós alterados os novos filhos (setChildren) e grava um novo array de raízes. Uma fonte somente leitura (um getter, um ref readonly, um computed): chame event.preventDefault() e aplique event.result você mesmo (como em SortableListOptions.items).
(node: T) => KeyPadrão: node.id. Também define as keys de makeSortableItem({ item }), das cópias e dos nós criados.
(node: T) => T[]Os filhos de um nó. Padrão: node.children.
(node: T, children: T[]) => voidComo a gravação padrão dá a um nó os seus novos filhos. Padrão: node.children = children.
(node: T, children: T[]) => TUma cópia de node com children, para event.result: uma nova árvore que deixa os seus nós como estão (a gravação padrão ainda passa por setChildren). Padrão: { ...node } com os filhos dados por setChildren ({ ...node, children } sem um setChildren). Passe-a para instâncias de classes e para nós que precisam de mais do que uma cópia rasa.
KeyPadrão: useId(), estável entre a renderização no servidor e no cliente. Lido uma única vez.
stringvalor · ref · getterComo as pessoas chamam a árvore: os textos para leitores de tela dizem isso em vez do id dela.
unknownvalor · ref · getterQualquer coisa a dizer sobre a árvore como alvo de drop: os eventos a carregam como over.data enquanto um arraste está sobre ela.
ActivationOptionsvalor · ref · getterComo um clique nas linhas desta árvore começa um arraste, em vez da activation do provider (a da própria linha prevalece).
Componentvalor · refComponente de overlay para as linhas desta árvore (o overlay da própria linha prevalece). Um ref trocado durante o arraste o troca na hora.
Componentvalor · refO que o overlay mostra enquanto um arraste que esta árvore aceita está sobre ela (veja SortableListOptions.overOverlay). A prop to dele diz onde o drop seria aninhado.
DropAnimationvalor · refComo o overlay pousa quando um arraste das linhas desta árvore termina (veja SortableListOptions.dropAnimation).
DropAnimationvalor · refComo o overlay pousa quando é solto nesta árvore (veja SortableListOptions.overDropAnimation).
Modifier[]valor · ref · getterModificadores para os arrastes das linhas desta árvore, aplicados depois dos modifiers do provider (os modifiers da própria linha prevalecem): por exemplo, [restrictToVerticalAxis]. Lido quando o arraste começa. Um eixo travado ainda aninha: a profundidade passa a vir de pairar sobre o meio de uma linha.
'x' | 'y'valor · ref · getterTrava em um eixo os arrastes das linhas desta árvore (o axis da própria linha prevalece), depois dos modificadores. Com 'y', as linhas ainda se aninham: a profundidade passa a vir de pairar sobre o meio de uma linha. Lido quando o arraste começa.
string | SortableGroupOptions<T>Listas e árvores com o mesmo nome de grupo trocam itens. Padrão: um grupo à parte. Lido uma única vez.
AcceptModevalor · ref · getterMulti-drag de itens de vários tipos: 'all' (padrão) ou 'some' precisam ser aceitos (group.put).
numbervalor · ref · getterPixels de deslocamento horizontal por nível de profundidade. Padrão 24.
TreeNestingvalor · ref · getterComo a profundidade é escolhida: deslocamento horizontal, pairar sobre o meio de uma linha, ou os dois (padrão).
SortablePlaceholdervalor · ref · getter'item' (padrão): o nó arrastado se move entre as linhas na profundidade projetada. 'indicator': a árvore não se move; indicator (na árvore e no makeSortableItem de cada linha) diz para onde vai o drop, com a depth e o parentKey dele, e você desenha a linha. Soltar fora, então, cancela.
numbervalor · ref · getterMaior profundidade permitida (as raízes são 0). Os próprios descendentes dos nós arrastados contam.
(node: T, parent: T) => booleanSe node pode ficar sob parent; um multi-drag pergunta para cada nó arrastado.
ReadonlySet<Key>valor · ref · getterKeys dos nós cujos filhos estão ocultos.
(node: T) => TCria cópias (group.pull: 'clone', a tecla modificadora de cópia). Obrigatório para copiar. Retorne a cópia com toda a sua subárvore: uma pasta copiada mantém os filhos. A cópia e cada um dos seus descendentes precisam de keys próprias (lidas com getKey), como todo nó de uma árvore.
(active: Active) => TAceita draggables simples de fora: cria o nó a inserir, na posição e profundidade projetadas (canNest e maxDepth se aplicam a ele). Pelo teclado, uma seta em direção à árvore leva o draggable para dentro dela, no nível da linha antes da qual ele entra, e as setas então movem o nó como qualquer outro. Um arraste de fora da página (external) faz a pergunta duas vezes, durante o arraste e no drop (veja o createItem da lista); um nó de pasta com um filho por arquivo guarda vários arquivos.
ExternalAcceptvalor · ref · getterAceita arrastes de fora da página: arquivos, links, texto (veja ExternalAccept), com createItem. Nós do grupo dela arrastados de outra janela do app entram como eles mesmos. Um valor, um ref ou um getter, lido ao vivo.
DropOutsidevalor · ref · getterUm drop fora de todos os alvos: manter os nós onde está o placeholder, cancelar ou removê-los. Padrão 'placeholder' ('cancel' com placeholder: 'indicator'). Lido no drop.
LayoutAnimationvalor · refAnimação FLIP desta árvore; padrão: a animation do provider. Um valor ou um ref (uma função é uma animação personalizada).
AutoAnimationvalor · ref · getterComo em SortableListOptions, para as linhas visíveis: nós adicionados, removidos ou movidos, e as linhas que um nó mostra ou oculta ao expandir ou recolher (collapsed).
booleanvalor · ref · getterO tamanho da própria árvore acompanha as linhas dela, como o de uma lista (animateSize). Padrão true.
boolean | AutoScrollOptionsvalor · ref · getterSobrescreve o autoScroll do provider para o contêiner de rolagem desta árvore. Lido quando o arraste começa.
MaybeElementRefComo em SortableListOptions: o elemento que recebe os drops pela árvore; por padrão, o da própria árvore.
booleanvalor · ref · gettertrue: as linhas dela não podem ser arrastadas, e ela não aceita itens.
( event: SortableTreeDropEvent<T>, ) => MaybePromise<BeforeDropResult>Como em SortableListOptions.
(event: SortableTreeDropEvent<T>) => voidComo em SortableListOptions: antes da gravação, que event.preventDefault() pula.
Retorno
O que makeSortableTree retorna.
KeyO id da árvore: a opção id, ou o que foi gerado para ela.
ComputedRef<FlatNode<T>[]>Nós visíveis na ordem do rascunho; o nó ativo traz a sua profundidade projetada.
ComputedRef<TreeProjection | null>Onde o nó ativo pousaria, null quando ele não está nesta árvore.
ComputedRef<SortableIndicator | null>Modo indicador: para onde vai o drop, com a depth e o parentKey dele; null quando não é aqui.
ComputedRef<boolean>Um arraste está sobre a árvore.
ComputedRef<boolean>Algo está sendo arrastado e esta árvore o aceita.
ComputedRef<Key | null>A linha que um virtualizador precisa manter montada: a posição, enquanto ela está nesta árvore (o nó arrastado, o nó selecionado dentro do qual o pego vai junto, uma cópia, um nó criado); caso contrário, o nó arrastado.
ComputedRef<number>Índice de activeKey em items, -1 quando ele não está aqui.
ComputedRef<Size | null>Tamanho da linha arrastada no início do arraste.
() => voidAnima mudanças de layout que a biblioteca não causou (por exemplo, uma nova medição de um virtualizador).
Nós planos
Um nó visível de uma árvore, como os items da árvore o listam: renderize-os em ordem, recuados conforme depth.
KeyA key do nó (getKey).
TO seu nó.
numberA profundidade dele: as raízes são 0. O nó arrastado tem a profundidade projetada.
Key | nullKey do pai dele; null para uma raiz.
numberÍndice entre os irmãos.
booleanEle tem filhos, mostrados ou não.
booleanOs filhos dele estão ocultos (a key dele está em collapsed).
Projeção
Onde o nó arrastado pousaria em uma árvore.
Como um arraste na árvore escolhe a profundidade: 'offset', pelo quanto ele se move para o lado (indentation por nível); 'hover', passando sobre o meio de uma linha, que o recebe como filho; 'both'.
type TreeNesting = 'offset' | 'hover' | 'both'O evento de drop
Evento de drop de uma árvore. index é a posição entre os irmãos sob parentKey (from: antes do movimento; to: depois dele, com o nó já removido do lugar antigo). from.parentKey é null para os nós raiz e para itens vindos de outra lista. Um multi-drag move as keys (cada uma com a sua subárvore) lado a lado: from é onde estava o nó que conduz o arraste (o pego, ou o nó selecionado dentro do qual ele vai junto), to é onde o primeiro deles pousa. Uma cópia (mode: 'copy') deixa os nós onde estão e insere items, as cópias deles; um draggable simples (mode: 'insert'), o nó que createItem criou.