HTML Academy · Pelajaran

Daftar Praktis Seret untuk Mengurutkan Ulang

Buat daftar yang dapat diurutkan ulang dengan Drag and Drop API.

Daftar Praktis Seret untuk Mengurutkan Ulang adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Ikhtisar Pola

Untuk membuat daftar yang dapat diurutkan ulang dengan cara diseret, jadikan setiap item dapat diseret, simpan id item yang diseret di dataTransfer saat dragstart, lalu saat drop sisipkan elemen yang diseret sebelum atau sesudah target. DOM dan model tetap sinkron jika Anda membuat ulang urutan dari DOM setelah setiap penjatuhan.

Markup

Render daftar datar dengan setiap li memiliki draggable="true" dan data-id. Menyimpan id pada elemen berarti pengendali seret tidak perlu menelusuri penyimpanan status terpisah untuk mengidentifikasi item — elemen itu sendiri menjadi sumber kebenaran.

<ul id="list">
  <li draggable="true" data-id="1">Item 1</li>
  <li draggable="true" data-id="2">Item 2</li>
  <li draggable="true" data-id="3">Item 3</li>
</ul>

dragstart Mencatat Sumber

Saat dragstart, simpan id item yang diseret di dataTransfer dan terapkan kelas "dragging" sebagai umpan balik visual. effectAllowed="move" memberi tahu browser bahwa ini adalah pengurutan ulang, bukan penyalinan, sehingga kursor dan dropEffect mencerminkan operasi pemindahan.

list.addEventListener("dragstart", (e) => {
  const li = e.target.closest("li");
  if (!li) return;
  e.dataTransfer.setData("text/plain", li.dataset.id);
  e.dataTransfer.effectAllowed = "move";
  li.classList.add("dragging");
});

dragover Mengizinkan Penjatuhan

Dengarkan pada daftar (delegasi peristiwa), panggil preventDefault, dan tetapkan dropEffect ke "move". Gunakan e.target.closest("li") untuk menemukan baris yang sedang diarahkan kursor sehingga pengendali yang sama berfungsi untuk seluruh daftar.

Menghitung Posisi Penyisipan

Untuk menentukan apakah item yang diseret harus ditempatkan di atas atau di bawah baris yang diarahkan kursor, bandingkan posisi Y kursor dengan titik tengah vertikal baris tersebut: const before = (e.clientY - rect.top) < rect.height / 2. before=true berarti insertBefore, sedangkan false berarti insertAfter.

function getInsertBefore(target, clientY) {
  const rect = target.getBoundingClientRect();
  return clientY < rect.top + rect.height / 2;
}

drop Mengurutkan Ulang DOM

Di pengendali drop, cari elemen yang diseret berdasarkan id dan baris target di bawah kursor. Panggil list.insertBefore(dragged, target) atau list.insertBefore(dragged, target.nextSibling), bergantung pada bagian target yang diarahkan kursor.

dragend Membersihkan Gaya

Baik penjatuhan berhasil maupun pengguna menekan Escape, dragend selalu dijalankan pada sumber. Gunakan peristiwa ini untuk menghapus kelas "dragging" dan sorotan target penjatuhan apa pun agar daftar kembali ke keadaan siaga.

list.addEventListener("dragend", () => {
  list.querySelectorAll(".dragging, .over").forEach((el) => {
    el.classList.remove("dragging", "over");
  });
});

Indikator Visual Penjatuhan

Tampilkan garis tipis di tempat item akan ditempatkan menggunakan elemen semu CSS pada baris yang diarahkan kursor, yang diaktifkan melalui kelas "over-top" atau "over-bottom" yang ditetapkan pengendali dragover berdasarkan posisi kursor. Pengguna dapat melihat titik penyisipan sebelum melepaskan item.

Menyinkronkan Model

Setelah penjatuhan, turunkan urutan baru dari DOM: const order = Array.from(list.children).map((li) => li.dataset.id). Kirim array tersebut ke server atau simpan dalam status — jangan pernah mencoba mempertahankan indeks paralel di samping DOM karena indeks itu dapat menyimpang saat seretan berlangsung cepat.

Alternatif dengan Papan Ketik

Tambahkan pengendali Up/Down yang memindahkan item berfokus dengan insertBefore. Umumkan pemindahan melalui wilayah aria-live ("Item dipindahkan ke atas, ke posisi 2"). Pengguna papan ketik memperoleh kemampuan yang sama tanpa melakukan seretan visual, yang penting untuk aksesibilitas.

Cadangan yang Ramah Sentuhan

Untuk perangkat seluler, ganti seretan bawaan dengan Pointer Events: saat pointerdown tangkap baris, saat pointermove pindahkan baris menggunakan transform CSS, dan saat pointerup lakukan pengujian titik pada baris di bawahnya lalu urutkan ulang. Pustaka seperti SortableJS merangkum pola ini untuk berbagai jenis masukan.

Pemeriksaan Pengetahuan

Mengapa kita menghitung posisi penyisipan berdasarkan posisi kursor relatif terhadap titik tengah vertikal baris yang diarahkan kursor?

Ringkasan

Daftar pengurutan ulang yang tangguh menggabungkan draggable="true" + dragstart (mencatat id, effectAllowed=move) + dragover (preventDefault + posisi indikator) + drop (insertBefore pada slot yang diturunkan dari titik tengah) + dragend (pembersihan). Selalu turunkan urutan baru dari DOM setelah penjatuhan dan sediakan cadangan papan ketik untuk aksesibilitas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Praktis Seret untuk Mengurutkan Ulang” gratis?

Ya — teks lengkap “Daftar Praktis Seret untuk Mengurutkan Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Praktis Seret untuk Mengurutkan Ulang”?

Buat daftar yang dapat diurutkan ulang dengan Drag and Drop API. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Daftar Praktis Seret untuk Mengurutkan Ulang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Atribut draggable dan Peristiwa dragstart
Peristiwa dragover dan drop
Objek dataTransfer
Daftar Praktis Seret untuk Mengurutkan Ulang

← Kembali ke HTML Academy