Quadro de projeto

<script setup lang="ts">
import { provide } from 'vue';
import { DnDProvider, type Active, type AnnouncedPosition, type Announcements } from '@vue-dnd-kit/core';
import Board from './Board.vue';
import { BOARD, createBoard, type Card, type Column } from './store';

// Provided above the provider: the overlay it renders reads the board too.
const board = createBoard();
provide(BOARD, board);

// Screen readers hear cards and columns by name, not by id.
const subject = (active: Active) => {
  const item = active.items[0]?.item;
  if (active.type.includes('column')) return `the ${(item as Column).title} column`;
  if (active.ids.length > 1) return `${active.ids.length} cards`;
  return `${(item as Card).id}, ${(item as Card).title}`;
};
/** Where it is: "Todo, position 2 of 6." for a card, "Place 2 of 4." for a column. */
const where = (position: AnnouncedPosition | undefined) => {
  if (!position) return '';
  const column = board.column(position.list);
  if (!column) return `Place ${position.index + 1} of ${position.length}.`;
  return `${column.title}, position ${position.index + 1} of ${position.length}.`;
};

const announcements: Partial<Announcements> = {
  onDragStart: ({ active }, { position }) => {
    const keys = active.sensor === 'keyboard' ? ' Arrow keys move it, Space drops it, Escape cancels.' : '';
    return `Picked up ${subject(active)}. ${where(position)}${keys}`;
  },
  onDragOver: ({ over }, { position }) => {
    if (over?.id === 'trash') return 'Over the trash. Drop to delete.';
    const column = over ? board.column(over.id) : undefined;
    if (column && !over!.accepted) return `${column.title} is full: its limit is ${column.limit} cards.`;
    return position ? where(position) : undefined;
  },
  onDragEnd: ({ active, over }, { position }) =>
    over?.id === 'trash' ? `Deleted ${subject(active)}. Undo is in the notice.` : `Dropped ${subject(active)}. ${where(position)}`,
  onDragCancel: ({ active }, { position }) => `${subject(active)} went back. ${where(position)}`,
  onDragResume: ({ active }) => `Not dropped: still holding ${subject(active)}.`,
};
</script>

<template>
  <!--
    Space picks a card up and drops it: Enter is left to open the card. Touch drags vibrate
    over a column that takes them, and when a drop is refused.
  -->
  <DnDProvider
    :keyboard="{ keys: { start: ['Space'] } }"
    screen-reader-instructions="Space picks up a card or a column, the arrow keys move it, Space drops it, Escape cancels. Enter opens a card, X selects it."
    :announcements="announcements"
    :haptics="{ enter: true, refuse: true }"
  >
    <Board />
  </DnDProvider>
</template>

O que observar

• Board.vue: as colunas são uma lista ordenável horizontal própria (strategy: 'horizontal', axis: 'x'), e cada coluna é um item ordenável arrastado pelo cabeçalho (handle). Expandido, o quadro preenche a tela; no celular, ele rola para os lados.
• Column.vue: os cards de todas as colunas são um único group, com as regras da coluna: o limite de WIP, a pergunta antes de Done e os filtros. O medidor no cabeçalho acende os cards que um arraste traria.
• Card.vue: um item ordenável de type: 'card', então a lixeira aceita cards e não colunas. Um clique o abre, Ctrl/Cmd-clique o seleciona (selected); com o teclado, Space o pega, Enter o abre e X o seleciona.
• store.ts: os dados e as regras do quadro, sem nenhum arrastar e soltar neles, fornecidos acima do DnDProvider para que o overlay também os leia.

As regras de uma coluna

Cada coluna passa quatro regras para a sua lista. put vê todos os cards de um multi-drag de uma vez: a coluna aceita todos se couberem no limite dela, ou nenhum. Sobre uma coluna cheia, a posição fica onde o arraste começou, a coluna fica vermelha e os cards na mão dizem por quê. onBeforeDrop pergunta antes de os cards entrarem em Done, e animateChanges desliza os cards que entram e saem sem um arraste: um filtro, Add card, Undo.

const { items, isOver, isAccepting } = makeSortableList(list, {
  id: props.column.id,
  items: () => props.column.cards.filter(board.matches),
  group: { name: 'cards', put: ({ keys }) => board.fits(props.column, keys) },
  overlay: CardOverlay,
  animateChanges: true,
  onBeforeDrop: (event) => (props.column.confirm && !event.sameList ? board.ask(event.items) : 'accept'),
  onDrop: (event) => {
    event.preventDefault();
    board.apply(event);
  },
});

Filtros, e drops que o quadro aplica

A busca e as pessoas na barra de ferramentas filtram os cards, e todo arraste continua funcionando sobre o que é mostrado. Cada lista lê a sua coluna por um getter, filtrada, então a biblioteca nunca a escreve: onDrop chama preventDefault() e entrega ao quadro e.result, os novos cards filtrados de cada coluna que o drop alterou. O quadro os coloca de volta nos lugares que os cards mostrados ocupavam, e os cards que os filtros escondem ficam onde estavam.

const merge = (all: Card[], shown: Card[]) => {
  const queue = [...shown];
  const merged: Card[] = [];
  for (const entry of all) {
    if (!matches(entry)) merged.push(entry);
    else if (queue.length) merged.push(queue.shift()!);
  }
  // Cards that came in from another column and found no place left: at the end.
  return [...merged, ...queue];
};

Os cards na mão

CardOverlay.vue é o overlay dos cards. O card pego se ergue e se inclina, o resto de uma seleção fica embaixo dele, feito de clones DragPreview girados pelo transform dos seus wrappers, e uma contagem fica por cima. Embaixo dos cards, uma dica diz o que soltar faria, a partir do over e do accepted do overlay: Move 2 cards to In review, Complete, Delete ou In review is full · 2 max. Soltos em uma coluna, cada clone pousa na sua própria posição; sobre a lixeira a pilha encolhe, e soltos ali os cards entram um depois do outro.

const hint = computed(() => {
  if (props.status !== 'dragging' || !props.over) return null;
  const many = props.items.length > 1 ? ` ${props.items.length} cards` : '';
  if (props.over.id === 'trash') return { tone: 'danger', icon: 'trash', text: `Delete${many}` };
  const column = board.column(props.over.id);
  if (!column) return null;
  if (!props.accepted) return { tone: 'danger', icon: 'limit', text: `${column.title} is full · ${column.limit} max` };
  if (board.find(props.items[0]!.id)?.column.id === column.id) return null;
  if (column.confirm) return { tone: 'done', column, text: `Complete${many}` };
  return { tone: '', column, text: `Move${many} to ${column.title}` };
});

Uma coluna arrastada pelo cabeçalho é o clone padrão, inclinado com a propriedade rotate enquanto data-dnd-overlay vale dragging.

Done pergunta antes

Um drop em Done retorna uma promise do onBeforeDrop: os cards esperam onde foram soltos enquanto ConfirmDialog.vue pergunta. Move to Done responde 'accept', Cancel e Escape 'reject' (os cards voltam ao lugar), e Keep dragging 'continue': os cards voltam a seguir o ponteiro, e o próximo clique os solta. Depois que os cards pousam (onDragSettle), o check deles aparece em Done e o progresso do sprint avança.

useDnDMonitor({
  onDragSettle: (event) => {
    const target = event.over ? board.column(event.over.id) : undefined;
    if ('dropped' in event && target?.confirm && event.source?.list !== target.id) board.complete(event.accepted);
  },
});

Vários cards, a lixeira e Undo

Cards selecionados viajam juntos: arraste um, e todo card selecionado vem junto, de qualquer coluna. A barra de seleção os move, os apaga ou limpa a seleção (Escape também). O Trash.vue é um alvo de drop simples que só aceita cards; ele os apaga do quadro, como fazem os botões Delete, para que o aviso possa devolver cada um ao seu lugar.

makeDroppable(el, {
  id: 'trash',
  accept: 'card',
  onDrop: (event) => {
    board.remove(event.active.ids);
    selection.delete(...event.active.ids);
  },
});

Mover sem arrastar

O painel de um card tem botões de Status, e a barra de seleção tem um botão por coluna. Eles movem cards com @vue-dnd-kit/actions: moveItem executa um arraste por teclado de verdade do card, e um card selecionado leva a seleção junto. Ele é anunciado e animado como os seus, e o limite da coluna e a pergunta de Done valem para ele como para qualquer arraste.

export function useMove() {
  const board = inject(BOARD)!;
  const { moveItem } = useDnDActions();
  return (ids: Key[], target: Column) => {
    if (!board.fits(target, ids)) return board.notify(`${target.title} is full: ${target.limit} cards at most`);
    void moveItem(ids[0]!, { list: target.id });
  };
}

Teclado e leitores de tela

Só Space pega um card, então Enter fica livre para abri-lo; as instruções dizem isso. As setas movem um card de posição em posição, e para a próxima coluna que o aceita: uma cheia é pulada, e depois da última coluna o próximo toque leva o card até a lixeira. Os anúncios dizem os nomes dos cards e das colunas em vez dos ids: "Picked up VDK-45, Haptics on Android tablets. Todo, position 6 of 6.", "In review is full: its limit is 2 cards."

<DnDProvider
  :keyboard="{ keys: { start: ['Space'] } }"
  screen-reader-instructions="Space picks up a card or a column, the arrow keys move it, Space drops it, Escape cancels. Enter opens a card, X selects it."
  :announcements="announcements"
  :haptics="{ enter: true, refuse: true }"
>

Leia mais: Listas que compartilham itens · Decidindo um drop · Multi-drag · O overlay · Arrastes programáticos · Acessibilidade