Implementar drag and drop seguro con Claude Code

Empieza por la pantalla real

El objetivo no es una demo vistosa, sino una implementación estable en móvil, teclado, textos largos, datos vacíos y CTA de negocio. Claude Code es más útil cuando la instrucción incluye límites: qué archivos pueden cambiar, qué debe seguir visible, qué necesita soporte de teclado y cómo se va a verificar el resultado.

Guías relacionadas: claude code accessibility, claude code react development, claude code file upload. Referencias oficiales: MDN Drag and Drop API, dnd kit docs, WAI-ARIA practices.

Prompt para Claude Code

Implementa con el menor cambio seguro. Mantén rutas, estilos y CTA. Devuelve código copiable, use case, pitfall, revisión móvil y rollback.

Lista de casos de uso

1. Búsqueda, gráficos, artículos relacionados y CTA en contenidos.
2. Listas, tableros, dashboards y formularios SaaS.
3. Rutas de ingresos en producto y consultoría.
4. Flujo de revisión en equipo, donde Claude Code entrega implementación, riesgos y comprobaciones manuales a la vez.

Ejemplo de implementación

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;
}

Lista de errores comunes

• No optimices solo para una captura de escritorio.
• No dejes que textos largos, tablas, SVG o bloques de código provoquen scroll horizontal.
• No ocultes el CTA, el precio, el formulario ni el bloque de anuncios detrás de una interacción decorativa.
• No dependas solo del color o del arrastre con puntero; el teclado y las alternativas de texto importan.
• No dejes que Claude Code reescriba archivos no relacionados, porque el coste de revisión sube rápido.

Verificación

Tras el build, prueba a 375px: sin overflow, bloques de código con scroll, CTA visible, foco claro y errores estables. Pide a Claude Code una segunda pasada de review que liste archivos cambiados, supuestos arriesgados, complejidad eliminable y pasos de rollback.

Ángulo de monetización

Para convertirlo en proceso de equipo, usa formación y consultoría Claude Code. El objetivo no es solo una UI más bonita. El objetivo es proteger anuncios, tarjetas de producto, enlaces de consulta, tablas de precios y formularios mientras mejora la mantenibilidad.

Revisión adicional

Antes de publicar, compara la página antes y después del cambio. Confirma que la acción de negocio sigue siendo evidente, que el layout no se desplaza y que la implementación es lo bastante pequeña para que otra persona del equipo la revise. Si la mejora no se puede explicar en un párrafo, divídela en un parche más pequeño. En el caso concreto de drag and drop, comprueba además que se puede mover una tarjeta con el teclado, que se puede soltar en una columna vacía y que Escape cancela el arrastre sin dejar el estado a medias.

Nota de verificación práctica

Probé el ancho móvil, los bloques de código, el CTA y el teclado. Separar implementación y review fue más estable. Lo que más diferencia hizo en una interfaz de arrastrar y soltar fue tratar el estado de React como única fuente de verdad en lugar de reordenar el DOM, y guardar los cambios solo al terminar el arrastre, no en cada evento dragover. Con esa regla clara, el diff fue más fácil de revisar y los problemas de accesibilidad aparecieron antes del despliegue.