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.

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

Suche, Charts, verwandte Artikel und CTA auf Content-Seiten.
Listen, Boards, Dashboards und Formulare in SaaS-Produkten.
Umsatzpfade auf Produkt- und Beratungsseiten.
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;
}

Native API oder dnd-kit?

Der Browser bietet die native Funktion, die in der HTML Drag and Drop API bei MDN beschrieben ist. Für Zwecke wie das Ablegen einer Datei vom Desktop in den Browser ist sie weiterhin sinnvoll. Beim Sortieren von Listen oder einem Kanban in React werden Event-Unterschiede, Touch-Unterstützung und Tastaturbedienung dagegen mühsam.

Option	Geeignet für	Schwäche
HTML Drag and Drop API	Datei-Drop, Datenübergabe mit externen Apps	Touch-Geräte und feines Sortieren schwer zu steuern
dnd-kit	Kartenbewegung, Listen, Kanban und barrierefreie Bedienung in React	Man muss die Konzepte der Bibliothek verstehen

In der Praxis ist es stabil, beides zu trennen: für einen Datei-Upload die native MDN-API, für das Sortieren innerhalb der App dnd-kit mit PointerSensor und KeyboardSensor. So deckst du Maus, Touch und Tastatur zugleich ab, ohne die Ereignislogik selbst nachzubauen.

Der Zustand ist die Wahrheit, nicht das DOM

Bei der Umsetzung legst du zuerst fest, was bewegt wird und wo gespeichert wird. Ist das unklar, erzeugt Claude Code gern Code, der nur das DOM umsortiert, oder Karten, die sich nicht per Tastatur bedienen lassen. Für Einsteiger genügen vier Begriffe: das Drag-Element (das gegriffene Element), das Drop-Ziel (der Ablageort), der Sensor (erkennt die Eingabemethode) und der State (die korrekte Reihenfolge auf dem Bildschirm).

Der Ablauf ist: Nutzeraktion, der Sensor erkennt sie, der Kontext macht daraus ein Event, der React-State wird aktualisiert, die Spalte wird neu gezeichnet. Der entscheidende Punkt ist, nicht das DOM direkt umzusortieren, sondern den State als Wahrheit zu behandeln. In React denkst du nicht „ich bewege den Bildschirm“, sondern „der Bildschirm ändert sich als Ergebnis einer geänderten Datenreihenfolge“ – das reduziert Fehler. Willst du speichern, sendest du den Inhalt des State an die API, statt die Reihenfolge aus dem DOM auszulesen. Gespeichert wird grundsätzlich erst nach dem Ende des Ziehens, weil während des Ziehens das Event vielfach feuert.

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.

Zusätzliche Review-Punkte

Vergleiche die Seite vor und nach der Änderung. Stelle sicher, dass die geschäftliche Aktion weiterhin klar erkennbar ist, dass das Layout nicht springt und dass die Umsetzung klein genug bleibt, damit eine andere Person im Team sie prüfen kann. Lässt sich die Verbesserung nicht in einem Absatz erklären, teile sie in einen kleineren Patch auf.

Hands-on verification note

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