Documentação/API

makeSortableItem

Registra uma linha de uma lista ou árvore ordenável — ela é arrastada, abre espaço e pousa na sua posição.

Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês

function makeSortableItem<TData = unknown>(  target: MaybeElementRef,  options: SortableItemOptions<TData>,): SortableItemReturn;

Torna um elemento uma linha de uma lista ordenável ou de uma árvore: ele é arrastado, abre espaço e pousa na sua posição. Chame-o em um componente renderizado dentro daquele que chamou makeSortableList (ou makeSortableTree); entre várias listas criadas ali, a linha entra na mais interna cujo elemento a contém. Identifique a linha com item (identificado pelo getKey da lista, item.id por padrão) ou id.

const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });

Veja Listas ordenáveis.

Live Arraste uma linha pela alça: o checkbox continua funcionando

Carregando a demo…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TodoList from './TodoList.vue';
</script>

<template>
  <DnDProvider>
    <TodoList />
  </DnDProvider>
</template>

Opções

Passe id ou item (id prevalece quando os dois são passados). As keys ordenáveis precisam vir dos dados: um id automático mudaria sempre que o componente fosse recriado (movido para outra lista, reciclado por uma lista virtual), e o arraste perderia o item.

As opções, exceto canDrag, aceitam um valor, um ref ou um getter (overlay, dropAnimation: um valor ou um ref) e significam o mesmo que em makeDraggable. Não existe keyboardMode: o teclado move um item ordenável de posição em posição.

id?

Keyvalor · ref · getter

Key do item na sua lista. Um getter a mantém atualizada em listas virtuais.

item?

unknownvalor · ref · getter

O item que este elemento renderiza, por exemplo, () => props.task. A key dele vem do getKey da lista (ou árvore) dona, por padrão item.id.

overlay?

Componentvalor · ref

Componente de overlay para este item; prevalece sobre o overlay da lista. Um ref trocado durante o arraste o troca na hora.

dropAnimation?

DropAnimationvalor · ref

Como o overlay pousa quando um arraste deste item termina; prevalece sobre o dropAnimation da lista. Lido no drop.

modifiers?

Modifier[]valor · ref · getter

Modificadores para os arrastes deste item, depois dos do provider; prevalecem sobre os modifiers da lista.

axis?

'x' | 'y'valor · ref · getter

Trava os arrastes deste item em um eixo ('x', 'y'); prevalece sobre o axis da lista.

handle?

MaybeElement | stringvalor · ref · getter

Elemento ou seletor dentro do item que inicia o arraste (e recebe os atributos).

disabled?

booleanvalor · ref · getter

true: o item não pode ser arrastado (como todo item de uma lista desativada).

type?

string | string[]valor · ref · getter

O tipo ou os tipos dele, para as regras group.put e o accept dos alvos de drop. Padrão: o nome do grupo da lista dele.

data?

TDatavalor · ref · getter

Qualquer coisa que o arraste deva carregar: os eventos e os alvos de drop a leem como active.data.

label?

stringvalor · ref · getter

Como as pessoas chamam o item: os textos para leitores de tela dizem isso em vez da key dele (Picked up Tomato at position 2 of 5 in Garden). Os eventos o trazem como active.label e em items.

activation?

ActivationOptionsvalor · ref · getter

Sobrescreve a activation da lista (ou árvore) dele e a do provider. Lido quando um clique começa.

canDrag?

(event: PointerEvent | KeyboardEvent) => boolean

Barreira extra, por exemplo, arrastar só enquanto uma tecla está pressionada.

attributes?

booleanvalor · ref · getter

Define os atributos role/tabindex/aria-* (padrão true), sem nunca sobrescrever os que o usuário definiu. Ao vivo: desligar remove o que a biblioteca definiu.

native?

boolean | NativeDragOptionsvalor · ref · getter

Um arraste dele com o mouse é o arraste do próprio navegador, que pode sair da página (veja DraggableOptions.native). Ele também carrega o item: as listas do grupo dele em outra janela do app o aceitam, e quando uma aceita, ele sai desta lista ('move').

Retorno

O que makeSortableItem retorna.

isDragging

ComputedRef<boolean>

Este item está sendo arrastado (também é true para os outros itens de um multi-drag), ou o overlay dele ainda está pousando.

isPlaceholder

ComputedRef<boolean>

Este elemento é uma posição onde um item arrastado vai pousar: a do item ativo e, no modo 'group' do multi-drag, as posições dos itens que viajam com ele.

selected

WritableComputedRef<boolean>

Ele está na seleção do provider: um arraste de um item selecionado carrega todos. Atribua um valor para selecionar ou desmarcar.

indicator

ComputedRef<SortableIndicator | null>

Modo indicador: o indicator da lista enquanto ele está preso a este item, null caso contrário. side diz onde fica a linha; nas árvores, depth e parentKey dizem onde o drop pousa (side: 'inside': dentro deste item).

index

ComputedRef<number>

Índice no rascunho renderizado, -1 quando desconhecido.