Daftar Sortable dengan Drag & Drop

Kenapa Sortable List?

Playlist Spotify, antrean tugas, dan urutan foto bisa disusun ulang dengan seret. Ini versi sederhana dari kanban: drag and drop dalam satu kolom untuk mengubah urutan.

Langkah Membangun

HTML: <ul id="daftar"> berisi item-item dengan gagang seret (⋮⋮).

CSS: Item yang diseret transparan. Garis indikator muncul di posisi drop (atas/bawah item target).

JS: Berbeda dengan kanban yang memindahkan antar kolom, di sini kita perlu tahu posisi drop yang tepat:

1. dragstart: simpan elemen yang diseret.
2. dragover pada tiap item: hitung apakah mouse di separuh atas atau bawah item (via e.clientY dan getBoundingClientRect()).
3. Tampilkan indikator garis di posisi yang tepat.
4. drop: sisipkan elemen sebelum/sesudah item target dengan insertBefore.
5. Simpan urutan baru ke array + localStorage.

insertBefore(elBaru, elAcuan) menyisipkan sebelum acuan; untuk "setelah", pakai acuan.nextSibling.

Kesalahan Umum

• Indikator posisi tidak jelas sehingga pengguna tidak tahu item akan jatuh di mana.
• Urutan data tidak ikut berubah (hanya DOM) sehingga refresh mengembalikan urutan lama.
• Di HP drag and drop HTML5 tidak jalan (butuh Touch Events atau library; sebutkan batasan ini).