Implementasi drag and drop aman dengan Claude Code

Mulai dari layar yang sebenarnya

Drag and drop adalah UI yang lebih mudah gagal daripada kelihatannya. Tampak seperti “cukup menjepit kartu lalu memindahkannya”, padahal nyatanya perlu memikirkan mouse, sentuh, keyboard, pembaca layar, penyimpanan setelah pengurutan, drop ke kolom kosong, hingga pembatalan salah operasi. Jika diserahkan mentah ke Claude Code, kode yang sekilas jalan memang cepat keluar, tetapi untuk mencapai kualitas siap rilis, penting menyempitkan syarat sejak awal.

Claude Code paling berguna ketika prompt memuat batasan: file mana yang boleh berubah, apa yang harus tetap terlihat, apa yang butuh dukungan keyboard, dan bagaimana hasilnya diverifikasi. Bacalah juga claude code accessibility, claude code react development, dan claude code file upload. Referensi resmi: MDN Drag and Drop API, dnd kit docs, WAI-ARIA practices.

Tentukan dulu sebelum mengoding

Pada implementasi drag and drop, tentukan lebih dulu “apa yang dipindahkan” dan “di mana disimpan”. Jika ini kabur, Claude Code cenderung menghasilkan kode yang mengurutkan hanya lewat operasi DOM, atau kartu yang tidak bisa dioperasikan dengan keyboard. Pemula cukup memahami empat istilah berikut.

Istilah	Arti sederhana	Tempat melihatnya di kode
Sumber drag	Elemen yang dijepit dan dipindahkan	Kartu tugas
Tujuan drop	Tempat yang bisa diisi	Kolom, sebelum/sesudah kartu
sensor	Pendeteksi metode input	Mouse, sentuh, keyboard
state	Urutan benar di layar	useState React

Alurnya: operasi pengguna → sensor mendeteksi → DndContext mengubahnya jadi event → state React diperbarui → kolom dirender ulang. Kuncinya, jadikan state sebagai sumber kebenaran, bukan mengurutkan DOM secara langsung. Di React, anggaplah “tampilan berubah sebagai akibat dari perubahan urutan data”, maka bug berkurang.

Claude Code prompt

Implementasikan dengan perubahan aman paling kecil. Pertahankan routes, style rules, dan CTA. Berikan kode, use case, pitfall, mobile check, dan rollback.

Use case checklist

1. Search, chart, artikel terkait, dan CTA di content site.
2. List, board, dashboard, dan form di SaaS.
3. Menjaga revenue path di halaman produk dan konsultasi.
4. Workflow review tim, ketika Claude Code mengembalikan implementasi, risiko, dan pengecekan manual sekaligus.

Native API atau dnd-kit

Browser punya fungsi native yang dijelaskan di MDN HTML Drag and Drop API. Untuk kasus seperti menjatuhkan file dari desktop ke browser, ini masih efektif. Namun untuk pengurutan list React atau kanban, menangani selisih event, dukungan sentuh, dan dukungan keyboard jadi merepotkan.

Pilihan	Cocok untuk	Kelemahan
HTML Drag and Drop API	Drop file, tukar data dengan aplikasi luar	Sulit mengontrol perangkat sentuh dan pengurutan detail
dnd-kit	Pindah kartu React, list, kanban, operasi aksesibel	Perlu memahami konsep library-nya

Untuk pengurutan di dalam aplikasi, dnd-kit dengan PointerSensor dan KeyboardSensor lebih stabil; untuk unggah file, pakai API native MDN.

Contoh implementasi

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

Pengecekan keyboard dan aksesibilitas

Drag and drop tidak cukup hanya “jalan dengan mouse”. Sebelum publish, periksa observasi berikut:

• Bisa berpindah ke handle tiap kartu dengan tombol Tab.
• Bisa mengangkat kartu dengan Space atau Enter.
• Bisa memindah dengan tombol panah, lalu menjatuhkan dengan Space atau Enter.
• Bisa membatalkan operasi dengan Escape.
• Cincin fokus terlihat.
• Teks penjelasan terhubung ke area operasi lewat aria-describedby.
• Memperhatikan prefers-reduced-motion untuk pengguna yang sensitif terhadap gerakan.

Untuk unggah file, jangan bergantung hanya pada drag. Selalu sisakan <input type="file"> agar bisa dipilih lewat keyboard juga.

Pitfall checklist

• Jangan optimasi hanya untuk screenshot desktop.
• Jangan biarkan teks panjang, tabel, SVG, atau code block memicu overflow horizontal.
• Jangan menyembunyikan CTA, harga, form, atau slot iklan di balik interaksi dekoratif.
• Jangan hanya bergantung pada warna atau drag pointer; keyboard dan alternatif teks tetap penting.
• Jangan biarkan Claude Code menulis ulang file tidak terkait, karena biaya review naik dengan cepat.

Pitfall yang spesifik untuk drag and drop: menyimpan ke server di tiap onDragOver (event terpicu berkali-kali saat drag, jadi simpan setelah drop final), lupa menjadikan kolom kosong sebagai tujuan drop, membuat UI khusus mouse, dan membaca urutan dari DOM alih-alih dari state. Di React, state adalah sumber kebenaran; saat menyimpan, kirim isi board ke API.

Verifikasi

Setelah build, cek 375px: tidak ada overflow, code block scroll, CTA terlihat, focus jelas, dan error state stabil. Minta Claude Code melakukan review pass kedua yang mencantumkan file berubah, asumsi berisiko, kompleksitas yang bisa dihapus, dan langkah rollback.

Sudut monetisasi

Untuk menjadikannya proses tim, gunakan Claude Code training and consultation. Intinya bukan hanya UI yang lebih baik, tetapi melindungi iklan, kartu produk, link konsultasi, tabel harga, dan form sambil meningkatkan kemudahan pemeliharaan. Pembaca artikel drag and drop biasanya punya kebutuhan konkret, “ingin memasukkan UI ini ke aplikasi kerja saya”, jadi sebelum implementasi sebaiknya tulis dulu di CLAUDE.md soal aksesibilitas, waktu penyimpanan, dan larangan manipulasi DOM langsung.

Catatan verifikasi langsung

Saya mengecek mobile width, code block, CTA, dan keyboard. Memisahkan implementasi dan review lebih stabil daripada menyerahkan semuanya sekaligus.

Review tambahan

Sebelum publish, bandingkan halaman sebelum dan sesudah perubahan. Pastikan aksi bisnis tetap jelas, layout tidak bergeser, dan implementasi cukup kecil untuk direview rekan lain. Jika perbaikan tidak bisa dijelaskan dalam satu paragraf, pecah menjadi patch yang lebih kecil.

Hasil setelah saya mencoba langkah ini

Sebagai catatan verifikasi, pada struktur contoh ini menentukan BoardState per kolom lebih dulu sebelum meminta Claude Code membuat bagian yang harus diperbaiki belakangan jelas berkurang. Khususnya, memasukkan drop ke kolom kosong, operasi keyboard, dan pembatalan Escape ke dalam checklist membuat kode yang “tampak jalan tetapi belum berkualitas rilis” terdeteksi lebih awal. Saat diterapkan ke drop file atau pengurutan gambar pun, yang paling berefek adalah menentukan dulu bentuk state, waktu penyimpanan, dan operasi alternatif keyboard. Untuk UI pengurutan React, jadikan dnd-kit sebagai acuan; untuk penerimaan file, jadikan HTML Drag and Drop API dari MDN sebagai acuan.