--- title: "Listas ordenáveis" description: "Listas, barras de abas e grades que se reordenam enquanto você arrasta — makeSortableList renderiza um rascunho, makeSortableItem cria as linhas, e o drop grava a nova ordem no seu ref. Handles, uma linha de drop, trocas." canonical_url: "https://zizigy.github.io/vue-dnd-kit/pt/docs/guides/sortable-lists" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## Uma lista e as linhas dela Uma lista ordenável precisa de dois componentes: a lista e a linha dela. ```vue [LayersPanel.vue] ``` ```vue [LayerRow.vue] ``` A linha se registra na lista em que é renderizada. Um componente pode criar várias listas (duas colunas, uma lista dentro de outra): cada linha entra naquela cujo elemento a contém, a mais interna no caso de listas dentro de listas. ## O rascunho `makeSortableList` retorna `items`, um **rascunho** do seu array. Enquanto você arrasta, o rascunho se reordena ao vivo: a linha arrastada ocupa a nova posição, e as outras saem do caminho. O seu array não muda até o drop. Aí a biblioteca grava a nova ordem nele. O painel de camadas acima mostra os dois: o painel renderiza `items` e se move enquanto você arrasta; a prancheta lê `layers`, o próprio array, e só reempilha quando você solta. - Renderize `items`, não o seu array. Renderizando o seu array, nada se move até o drop. - A gravação acontece depois do `onDrop` da lista. No `onDrop`, o seu array ainda tem a ordem antiga e `e.result`, a nova. - `layers` é um ref comum (aqui um `defineModel`, e a gravação emite `update:modelValue`), então o resto do seu app vê a mudança como qualquer outra. ```ts makeSortableList(list, { items: layers, onDrop: (e) => { console.log(e.from.index, '→', e.to.index, e.result.get(e.to.list)); }, }); ``` Uma store, estado do servidor ou dados imutáveis? Passe um getter ou um `computed` em vez de um ref. A biblioteca não grava em uma fonte somente leitura: chame `e.preventDefault()` e aplique `e.result` você mesmo. Veja [listas controladas](https://zizigy.github.io/docs/guides/shared-lists#controlled-lists). ## Keys As linhas são identificadas pelos dados, nunca pelo índice ou por um id automático. Por padrão, a key é `item.id`, ou o próprio item para strings e números. ```ts // LayersPanel.vue: your items have another key makeSortableList(list, { items: layers, getKey: (layer) => layer.uuid }); // LayerRow.vue: `item` is keyed with the list's getKey… makeSortableItem(el, { item: () => props.layer }); // …or pass the key yourself makeSortableItem(el, { id: () => props.layer.uuid }); ``` - Use a mesma key no `v-for`: `:key="layer.uuid"`. Com `:key="index"` as linhas erradas são animadas e o estado delas pula de uma linha para outra. - As keys precisam ser únicas entre todas as listas que trocam itens. - Passe `item` e `id` como getters, para que uma linha continue sincronizada quando as props dela mudam. ## Handles Por padrão, a linha inteira inicia um arraste, exceto os botões, inputs e outros controles dentro dela: o olho e o cadeado de uma camada continuam sendo botões comuns. Passe `handle` para arrastar por uma parte só: ```vue [LayerRow.vue] ``` - `handle` é um seletor dentro do item, ou um ref de elemento. - Um arraste com o mouse começa pelo handle na hora, sem os 4 px de sempre. Uma pressão que não se move continua sendo um clique: o handle pode abrir um menu no `click`. - O handle recebe os atributos do arraste (`role`, `tabindex`, `aria-*`), e os arrastes por teclado começam por ele. Faça do handle um `