Papan Kanban Drag & Drop

Kenapa Kanban?

Papan kanban (Trello, Jira, Notion) adalah alat manajemen proyek paling populer. Membangunnya mengajarkan HTML5 Drag and Drop API: salah satu API browser yang terlihat rumit tapi sebenarnya hanya 4 event.

Langkah Membangun

HTML: Tiga kolom (<div class="kolom">): "Todo", "Doing", "Done". Tiap kolom berisi kartu-kartu (<div class="kartu" draggable="true">) dan tombol "+ Tambah kartu".

CSS: Kolom dengan background abu terang dan min-height agar bisa di-drop meski kosong. Kartu yang sedang diseret menjadi transparan (opacity: 0.4). Kolom target disorot saat kartu melayang di atasnya.

JS: Empat event drag and drop:

1. dragstart pada kartu: simpan id kartu yang diseret, tambah class visual.
2. dragover pada kolom: WAJIB preventDefault() agar drop diizinkan (tanpa ini drop tidak akan pernah terjadi).
3. dragenter/dragleave: sorot kolom target.
4. drop: pindahkan kartu ke kolom, update data (array per kolom), simpan ke localStorage.

Data disimpan sebagai object { todo: [...], doing: [...], done: [...] } agar status selalu sinkron dengan tampilan.

Kenapa preventDefault di dragover?

Secara default browser MELARANG drop. Ini keputusan keamanan lama. Memanggil preventDefault memberi tahu browser "saya mengizinkan drop di sini". Lupa satu baris ini adalah bug nomor satu pemula.

Kesalahan Umum

• Lupa preventDefault di dragover sehingga drop tidak pernah terpanggil.
• Data tidak ikut pindah (hanya DOM dipindah) sehingga refresh mengembalikan posisi lama.
• Tidak ada feedback visual saat drag sehingga pengguna bingung kartu bisa diseret (tambah cursor: grab).