Documentação/Primeiros passos
Início rápido
Uma lista ordenável em três arquivos — um provider, uma lista e as linhas dela.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
Aqui está tudo, funcionando. Arraste uma linha, ou chegue a ela com Tab, pressione Space, mova-a com as setas e pressione Space de novo.
Carregando a demo…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TaskList from './TaskList.vue';
</script>
<template>
<!-- The provider goes around the components that drag (often the whole app). -->
<DnDProvider>
<TaskList />
</DnDProvider>
</template>Passo a passo
Envolva o app em um provider
DnDProvider controla o arraste. Todo composable precisa rodar em um componente renderizado
dentro dele — não no componente cujo template o contém.
Crie uma lista
makeSortableList recebe o elemento da lista e o seu array. Ele retorna items: um rascunho
que se reordena ao vivo enquanto você arrasta. Renderize o rascunho, não o seu array, e use o id
como key das linhas.
Crie as linhas
Cada linha chama makeSortableItem com o seu elemento e o item que renderiza. A key dela vem de
item.id.
Quando o drop acontece, tasks recebe a nova ordem — é um ref comum, então o resto do seu app
vê a mudança como qualquer outra.
e.preventDefault() em onDrop e aplique e.result você mesmo.