makeSortableList

Fonte da verdade. Um ref gravável recebe o novo array no drop, logo depois do onDrop. Uma fonte somente leitura (um getter, um ref readonly, um computed) não pode recebê-lo: chame event.preventDefault() e aplique event.result você mesmo. Os builds de desenvolvimento avisam quando um drop fica a cargo da biblioteca nesse caso, e então nada muda.

Padrão: item.id, ou o próprio item no caso de primitivos. Também define as keys de makeSortableItem({ item }).

Mostra só os itens para os quais retorna true (uma busca, uma tag): items (o retornado) contém esses itens, e um arraste ordena entre eles. Os outros mantêm os seus lugares na origem: um drop escreve o array inteiro, com cada item oculto ainda depois do visível que ele seguia (depois do mais próximo que ficou, quando aquele se moveu). Reativo: o que ele lê (um ref de busca) vale na hora. e.to.index e activeIndex contam os itens mostrados.

Padrão: useId(), estável entre a renderização no servidor e no cliente. Lido uma única vez.

Como as pessoas chamam a lista: os textos para leitores de tela dizem isso em vez do id dela (position 2 of 5 in Garden).

Qualquer coisa a dizer sobre a lista como alvo de drop: os eventos a carregam como over.data enquanto um arraste está sobre ela.

Como um clique nos itens desta lista começa um arraste, em vez da activation do provider (a do próprio item prevalece). Lido quando um clique começa.

Componente de overlay para os itens desta lista (o overlay do próprio item prevalece). Ele recebe OverlayProps e é mantido durante todo o arraste, inclusive sobre outras listas, a menos que o alvo sob o arraste tenha um overlay próprio (overOverlay). Um ref trocado durante o arraste o troca na hora.

O que o overlay mostra enquanto um arraste que esta lista aceita está sobre ela, venha de qual lista vier: um componente que recebe OverlayProps e o overlay do próprio arraste como slot padrão (veja DroppableOptions.overOverlay). Lido ao vivo.

Como o overlay pousa quando um arraste dos itens desta lista termina, em vez do dropAnimation do provider (o do próprio item prevalece; o de um alvo de drop prevalece sobre os dois). Lido no drop.

Como o overlay pousa quando é solto nesta lista, venha de qual lista vier: prevalece sobre o dropAnimation do item arrastado e do provider. Lido no drop.

Modificadores para os arrastes dos itens desta lista, aplicados depois dos modifiers do provider (os modifiers do próprio item prevalecem): por exemplo, [restrictToVerticalAxis] para manter os itens de uma lista vertical no seu eixo. Lido quando o arraste começa.

Trava em um eixo os arrastes dos itens desta lista: 'y' para uma lista vertical, 'x' para uma horizontal (o axis do próprio item prevalece). A trava vem depois dos modificadores, então se mantém não importa o que eles façam. Lido quando o arraste começa.

Listas com o mesmo nome de grupo trocam itens. Padrão: um grupo à parte. Lido uma única vez.

Multi-drag de itens de vários tipos: 'all' (padrão) ou 'some' precisam ser aceitos (group.put).

Padrão 'vertical'.

'swap': o item arrastado troca de lugar com o que está sob o ponteiro, ao vivo; voltar para cima dele ou sair das listas desfaz a troca. Listas de um mesmo grupo que ambas trocam passam itens entre si: o item sob o ponteiro vai para o lugar do arrastado, então precisa poder sair da sua lista (group.pull: true) e entrar na do item arrastado (group.put). O multi-drag ordena em vez disso. Padrão 'sort'.

'indicator': a lista não se move, indicator diz para onde vai o drop. Padrão 'item'.

Modo de multi-drag dos arrastes que começam nesta lista. Padrão 'group'. Lido quando o arraste começa.

false: os itens não podem ser reordenados dentro desta lista (paletas).

Cria cópias (pull: 'clone', tecla modificadora de cópia). Obrigatório para copiar.

Aceita draggables simples de fora: cria o item a inserir. Pelo teclado, uma seta em direção à lista leva o draggable para dentro dela (na altura dele, como nos movimentos entre listas), e o item criado então se move de posição em posição como qualquer outro.

Um arraste de fora da página (external) faz a pergunta duas vezes: durante o arraste, pelo item que mostra para onde ele vai (só active.external.fileTypes e types são conhecidos nesse momento), e no drop, com os dados dele (active.external.ready), pelo que é inserido. Um array de itens insere todos onde estava a posição: um por arquivo.

Aceita arrastes de fora da página: arquivos, links, texto (veja ExternalAccept). A lista abre espaço para eles como para um draggable simples, com createItem, que ela exige. Itens do grupo dela arrastados de outra janela do app (native) não precisam de nenhuma das duas opções: entram como eles mesmos. Um valor, um ref ou um getter, lido ao vivo.

Um drop fora de todos os alvos: manter os itens onde está o placeholder, cancelar ou removê-los. Padrão 'placeholder' ('cancel' com placeholder: 'indicator'). Lido no drop.

Animação FLIP desta lista; padrão: a animation do provider. Um valor ou um ref (uma função é uma animação personalizada).

Anima as mudanças em items que nenhum arraste fez: itens adicionados, removidos, movidos e filtrados (veja AutoAnimation). Padrão: o animateChanges do provider, desligado a menos que definido ali. Lido quando items muda.

O tamanho da própria lista acompanha os itens dela: quando um arraste traz um item ou leva um embora (e no drop, e nas mudanças que animateChanges mostra), ela cresce ou encolhe até o novo tamanho com a duração e o easing de animation em vez de pular, e o que está em volta se move junto. Padrão true; false a deixa pular. Lido a cada mudança.

Sobrescreve o autoScroll do provider para o contêiner de rolagem desta lista. Lido quando o arraste começa.

O elemento que recebe os drops pela lista; por padrão, o próprio elemento da lista. Por exemplo, a coluna inteira ao redor de uma lista curta de cards, para que um card solto abaixo do último ainda pouse na lista (no final dela). Os itens ficam no elemento da lista.

true: os itens dela não podem ser arrastados, e ela não aceita itens.

Consultado antes de um drop nesta lista, e antes de dropOutside: 'remove' tirar os itens dela: false o rejeita (os itens voltam ao lugar), algumas keys aceitam só esses itens. Pode ser assíncrono: o overlay espera onde foi solto. Um erro também rejeita o drop. Veja SortableDropEvent para result e preventDefault.

Chamado assim que um drop nesta lista é aceito, antes de ser gravado: items ainda tem a ordem antiga, event.result, a nova. Síncrono: a gravação vem assim que ele retorna, a menos que tenha chamado event.preventDefault(). Também é chamado na lista de onde os itens vieram quando eles são removidos (to.index é -1).

O id da lista: a opção id, ou o que foi gerado para ela.

Ordem do rascunho: renderize isto, não o array de origem.

Um arraste está sobre a lista.

Algo está sendo arrastado e esta lista o aceita.

Modo indicador: para onde vai o drop nesta lista; null quando não é aqui.

A linha que um virtualizador precisa manter montada: a posição enquanto ela está nesta lista (uma cópia, um item criado), senão o item arrastado; null sem arraste.

Índice do item ativo no rascunho desta lista, -1 quando ele não está aqui.

Tamanho do item arrastado no início do arraste: por exemplo, para o tamanho de uma linha virtual que ele ocupa.

Anima mudanças de layout que a biblioteca não causou (por exemplo, uma nova medição de um virtualizador).

Listas e árvores com o mesmo nome trocam itens.

Se os itens podem sair desta lista: mover, copiar ('clone', uma paleta) ou de jeito nenhum.

Se os itens podem entrar nesta lista: true (padrão), false, um tipo ou tipos que os itens precisam ter (como o accept de um alvo de drop: com acceptMode, todos ou alguns), ou uma função do arraste.

Keys dos itens.

Os itens (para um draggable simples, o item que createItem criou).

Os tipos dos itens, juntos.

Lista de origem, null para draggables externos.

Id da lista consultada.

Keys dos itens arrastados.

Os itens que pousam: os arrastados, as cópias deles (mode: 'copy'), ou o item que createItem criou ('insert').

Keys que se concretizam: todas, a menos que a lista ou onBeforeDrop aceite só algumas.

Keys que voltam para onde estavam.

Onde o arraste começou: a lista e o índice do item ativo. list é null para um draggable simples de fora.

index é -1 quando nada pousou: os itens saíram das suas listas (e.source.remove(), dropOutside: 'remove').

O drop fica na lista onde o arraste começou.

O que o drop faz (veja DragMode).

mode: 'swap': o item com o qual o arrastado foi trocado. Ele se moveu no sentido inverso, from o lugar que o item arrastado ocupou (to acima) to aquele onde o item arrastado começou (from acima); entre listas, para a lista do item arrastado.

Os novos itens de cada lista que o drop altera, por id de lista: exatamente o que a gravação padrão coloca nos items delas, como novos arrays. Movimentos, cópias, itens criados, uma aceitação parcial, os dois lados de uma troca e itens removidos (e.source.remove() em um alvo dentro de um item, uma zona de lixeira, dropOutside: 'remove') estão todos ali; uma lista que o drop deixa como está não está. A entrada de uma árvore é um novo array de raízes: os nós nos caminhos alterados são cópias (withChildren), as subárvores intactas são compartilhadas, os seus nós nunca são mutados. No onBeforeDrop, é o drop como está antes de o hook responder (retornar algumas keys o altera); o onDrop recebe o final.

Pula a gravação padrão, em todas as listas de result (gravar só em algumas perderia ou duplicaria itens). Aplique result você mesmo no onDrop, ou antes de um onBeforeDrop assíncrono ser resolvido, e o overlay pousa na nova ordem. Se não for aplicado em lugar nenhum, as listas ficam como estavam e o overlay volta ao lugar (cópias e itens criados, que ainda não têm lugar, desaparecem aos poucos).

preventDefault() foi chamado, no onBeforeDrop ou no onDrop.

Um arraste de fora da página (external): o que ele carregava, com os dados dele (ele foi solto).

Id da lista (ou árvore) para onde vai o drop.

Posição de inserção na lista como renderizada.

Item ao qual o indicador está preso; null em uma lista vazia.

Lado de key em que a linha fica. 'inside' (árvores): o ponteiro está sobre o meio de uma linha que aceita os nós arrastados, e o drop vai para dentro dela como o primeiro filho. 'swap' (behavior: 'swap'): key é o item com o qual o drop troca de lugar; marque o próprio item.

Árvores: profundidade que os nós soltos recebem (as raízes são 0), por exemplo, para indentar a linha.

Árvores: pai que os nós soltos recebem, null no nível das raízes.