Drag and Drop mit Claude Code sicher implementieren

Start with the real screen

Ziel ist kein Demo-Code, sondern eine Umsetzung, die auf Mobile, mit Tastatur, langen Texten, leeren Daten und klaren CTAs stabil bleibt. Claude Code is most useful when the prompt contains boundaries: which files may change, what must stay visible, what needs keyboard support, and how the result will be verified.

Related guides: claude code accessibility, claude code react development, claude code file upload. Official references: MDN Drag and Drop API, dnd kit docs, WAI-ARIA practices.

Claude Code prompt

Implementiere dies mit der kleinsten sicheren Änderung. Erhalte Routen, Stilregeln und CTA. Liefere kopierbaren Code, use case, pitfall, mobile Checks und Rollback.

Use case checklist

1. Suche, Charts, verwandte Artikel und CTA auf Content-Seiten.
2. Listen, Boards, Dashboards und Formulare in SaaS-Produkten.
3. Umsatzpfade auf Produkt- und Beratungsseiten.
4. Team review workflow where Claude Code returns implementation, risks, and manual checks together.

Implementation example

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

• Do not optimize only for a desktop screenshot.
• Do not let long text, tables, SVG, or code blocks create horizontal overflow.
• Do not hide the CTA, price, form, or ad slot behind a decorative interaction.
• Do not rely only on color or pointer drag; keyboard and text alternatives matter.
• Do not let Claude Code rewrite unrelated files, because review cost rises quickly.

Verification

Nach dem Build bei 375px prüfen: kein Overflow, Codeblöcke scrollen, CTA sichtbar, Tastaturfokus klar, Fehlerzustände stabil. Ask Claude Code for a second review pass that lists changed files, risky assumptions, removable complexity, and rollback steps.

Monetization angle

Wenn daraus ein Teamprozess werden soll, starte mit Claude Code training and consultation. The point is not only better UI. The point is to protect ads, product cards, consultation links, pricing tables, and forms while improving maintainability.

Hands-on verification note

Ich habe mobile Breite, Codeblöcke, CTA und Tastaturbedienung geprüft. Getrennte Implementierung und Review sind stabiler.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.