0Pricing
HTML Academy · Pelajaran

Atribut draggable dan Peristiwa dragstart

Buat elemen dapat diseret dan tanggapi dragstart.

Atribut draggable dan Peristiwa dragstart adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Atribut draggable

Elemen apa pun menjadi sumber seret saat Anda menetapkan draggable="true". Tautan dan gambar dapat diseret secara bawaan; elemen lainnya (div, li, span) memerlukan atribut tersebut secara eksplisit. draggable="false" mengecualikan elemen dari penyeretan bawaan.

<div draggable="true" id="card">Drag me</div>

Peristiwa Saat Mulai Menyeret

Saat pengguna mulai menyeret, elemen sumber memicu peristiwa mulai menyeret. Di sinilah Anda menginisialisasi penyeretan: catat item yang sedang dipindahkan, beri gaya secara opsional, dan tulis data ke objek dataTransfer yang akan dibaca oleh sasaran peletakan.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

Tanpa Mulai Menyeret, Tidak Ada yang Terjadi

Jika Anda menandai elemen sebagai dapat diseret tetapi tidak pernah menangani peristiwa mulai menyeret, peramban tetap menyeret gambar bayangan, tetapi tidak ada data yang ditetapkan sehingga sebagian besar sasaran peletakan menolak peletakan tersebut. Selalu pasangkan atribut dapat diseret dengan pendengar peristiwa mulai menyeret yang menyimpan setidaknya sebuah pengenal.

Menetapkan effectAllowed

e.dataTransfer.effectAllowed = "move" dalam peristiwa mulai menyeret membatasi operasi menjadi: "copy", "move", "link", "copyMove", "all", atau "none". Pengaturan ini menentukan kursor yang ditampilkan peramban dan efek peletakan yang nantinya dapat ditetapkan oleh sasaran.

Menambahkan Petunjuk Visual

Tambahkan kelas CSS ke sumber agar tampil redup saat sedang diseret: card.classList.add("dragging"). Hapus kelas tersebut dalam peristiwa selesai menyeret agar gaya dihapus, baik peletakan berhasil maupun dibatalkan dengan Escape.

Gambar Seret Khusus

Secara bawaan, peramban menyeret cuplikan sumber yang tembus cahaya. Ganti dengan e.dataTransfer.setDragImage(node, offsetX, offsetY) — teruskan elemen DOM tersembunyi atau objek Gambar untuk menampilkan pratinjau khusus di kursor.

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

Peristiwa Selesai Menyeret

dragend dipicu pada sumber setelah penyeretan selesai, baik peletakan berhasil, dilakukan pada sasaran yang tidak valid, maupun dibatalkan. Gunakan peristiwa ini untuk pembersihan — menghapus kelas penyeretan, menyembunyikan pratinjau bayangan, dan memulihkan opasitas.

Mendeteksi Pembatalan

Di dalam peristiwa selesai menyeret, periksa e.dataTransfer.dropEffect. Jika nilainya adalah "none", peletakan tidak terjadi (sasaran menolak, pengguna menekan Escape, atau peletakan dilakukan di luar halaman). Jika tidak, nilainya sama dengan efek yang dipilih sasaran peletakan ("move", "copy", "link").

Menyeret pada Perangkat Sentuh

Penyeretan dan peletakan bawaan berfokus pada komputer desktop. Pada perangkat sentuh, API ini hampir tidak berfungsi tanpa polifil atau pengganti berbasis Peristiwa Penunjuk. Untuk antarmuka pengguna pengurutan ulang yang ramah perangkat seluler, pilih pustaka seperti SortableJS atau dnd-kit, yang mengabstraksikan kedua model peristiwa.

Pertimbangan Aksesibilitas

Penyeretan dan peletakan bawaan tidak dapat diakses dengan papan ketik — pengguna yang hanya menggunakan papan ketik tidak dapat mengurutkan ulang item. Selalu sediakan alternatif: penangan tombol panah, tombol pindah ke atas/pindah ke bawah, atau dialog pengurutan ulang yang dikendalikan aria. Penyeretan dan peletakan seharusnya meningkatkan pengalaman, bukan menggantikannya.

Menonaktifkan Bawaan Peramban

Pemilihan teks di dalam elemen yang dapat diseret dapat mengganggu penyeretan. Terapkan CSS user-select: none dan -webkit-user-drag: element pada sumber agar peramban menyeret elemen, bukan memilih teks di dalamnya.

Pemeriksaan Pengetahuan

Mengapa Anda biasanya harus memasang pendengar peristiwa mulai menyeret meskipun atribut draggable="true" saja sudah membuat elemen dapat diseret?

Ringkasan

Tandai sumber dengan draggable="true" dan gunakan peristiwa mulai menyeret untuk mengisi dataTransfer, menetapkan effectAllowed, serta secara opsional menetapkan gambar seret khusus. Pasangkan dengan peristiwa selesai menyeret untuk membersihkan gaya. Sediakan alternatif papan ketik untuk aksesibilitas dan pertimbangkan polifil untuk perangkat sentuh.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Atribut draggable dan Peristiwa dragstart” gratis?

Ya — teks lengkap “Atribut draggable dan Peristiwa dragstart” 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 “Atribut draggable dan Peristiwa dragstart”?

Buat elemen dapat diseret dan tanggapi dragstart. 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 1 dari 4.

Berapa lama pelajaran “Atribut draggable dan Peristiwa dragstart” 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

  1. Atribut draggable dan Peristiwa dragstart
  2. Peristiwa dragover dan drop
  3. Objek dataTransfer
  4. Daftar Praktis Seret untuk Mengurutkan Ulang
← Kembali ke HTML Academy