Implementar drag and drop seguro com Claude Code

Comece pela tela real

O objetivo não é uma demo bonita, mas uma implementação estável em mobile, teclado, textos longos, dados vazios e CTA de negócio. O Claude Code é mais útil quando o prompt contém limites: quais arquivos podem mudar, o que deve continuar visível, o que precisa de suporte a teclado e como o resultado será verificado.

Guias relacionados: claude code accessibility, claude code react development, claude code file upload. Referências oficiais: MDN Drag and Drop API, dnd kit docs, WAI-ARIA practices.

Defina antes o que mover e onde salvar

Drag and drop é uma UI que falha mais do que parece. “Só pegar um card e mover” parece simples, mas na prática você precisa pensar em mouse, toque, teclado, leitor de tela, salvar depois de reordenar, soltar em uma coluna vazia e desfazer ações erradas. Se você joga tudo no Claude Code, sai rápido um código que aparenta funcionar, mas para chegar a uma qualidade publicável é essencial delimitar as condições antes.

Para começar, bastam estes quatro termos.

Termo	Significado simples	Onde aparece
Origem do arrasto	Elemento que você pega e move	O card de tarefa
Destino do drop	Lugar onde pode soltar	Coluna, antes ou depois de um card
sensor	Quem detecta o método de entrada	Mouse, toque, teclado
state	A ordem correta na tela	O useState do React

O ponto é não reordenar o DOM diretamente, e sim tratar o state como a fonte da verdade. Em React, pense “a tela muda como resultado de mudar a ordem dos dados”, e não “eu movo a tela”. Assim, surgem menos bugs e a reordenação por teclado também fica viável.

Prompt para Claude Code

Implemente com a menor mudança segura. Mantenha rotas, estilos e CTA. Retorne código copiável, use case, pitfall, revisão mobile e rollback.

Use case checklist

1. Busca, gráficos, artigos relacionados e CTA em conteúdo.
2. Listas, boards, dashboards e formulários SaaS.
3. Rotas de receita em produto e consultoria.
4. Fluxo de revisão em equipe, em que o Claude Code retorna implementação, riscos e checagens manuais juntos.

Exemplo de implementação

import { useState } from "react";

type Item = { id: string; label: string };

function moveItem(items: Item[], from: number, to: number) {
  const copy = [...items];
  const [item] = copy.splice(from, 1);
  copy.splice(to, 0, item);
  return copy;
}

export function SortableList({ initialItems }: { initialItems: Item[] }) {
  const [items, setItems] = useState(initialItems);
  const [dragId, setDragId] = useState<string | null>(null);

  return (
    <ul aria-label="Sortable tasks">
      {items.map((item, index) => (
        <li
          key={item.id}
          draggable
          onDragStart={() => setDragId(item.id)}
          onDragOver={(event) => event.preventDefault()}
          onDrop={() => {
            const from = items.findIndex((candidate) => candidate.id === dragId);
            if (from >= 0 && from !== index) setItems(moveItem(items, from, index));
            setDragId(null);
          }}
        >
          <button type="button" aria-label={`Move ${item.label}`}>
            {item.label}
          </button>
        </li>
      ))}
    </ul>
  );
}

[draggable="true"] {
  cursor: grab;
}

[draggable="true"]:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 4px;
}

Pitfall checklist

• Não otimize apenas para um screenshot de desktop.
• Não deixe texto longo, tabelas, SVG ou blocos de código criarem overflow horizontal.
• Não esconda o CTA, o preço, o formulário ou o espaço de anúncio atrás de uma interação decorativa.
• Não dependa só de cor ou de arrastar com o ponteiro; teclado e alternativas em texto importam.
• Não deixe o Claude Code reescrever arquivos sem relação, porque o custo de revisão sobe rápido.

Verificação

Após o build, teste 375px: sem overflow, blocos de código com scroll, CTA visível, foco claro e erros estáveis. Peça ao Claude Code uma segunda passada de revisão que liste arquivos alterados, suposições arriscadas, complexidade removível e passos de rollback.

Monetização

Para virar processo de equipe, use treinamento e consultoria Claude Code. O ponto não é só uma UI melhor: é proteger anúncios, cards de produto, links de consultoria, tabelas de preço e formulários enquanto se melhora a manutenibilidade.

Revisão adicional

Antes de publicar, compare a página antes e depois da mudança. Confirme que a ação de negócio continua óbvia, que o layout não pula e que a implementação é pequena o bastante para outro colega revisar. Se a melhoria não couber em um parágrafo de explicação, divida em um patch menor.

Nota de verificação prática

Testei largura mobile, blocos de código, CTA e teclado. Separar implementação e review foi mais estável. O maior aprendizado foi não reordenar o DOM na mão: quando deixei o state como fonte da verdade e expus uma alternativa de teclado para mover os cards, a reordenação parou de quebrar com leitor de tela e em coluna vazia.