Peristiwa dragover dan drop
Tentukan target pelepasan yang valid dan tangani peristiwa drop.
Peristiwa dragover dan drop adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Sasaran Peletakan Memerlukan Dua Penangan
Sasaran peletakan harus menangani peristiwa saat menyeret di atas sasaran (untuk mengizinkan peletakan) dan peristiwa peletakan (untuk menerimanya). Tanpa peristiwa saat menyeret di atas sasaran, peramban menolak memicu peristiwa peletakan karena perilaku bawaannya adalah "tidak ada elemen yang menjadi sasaran peletakan".
preventDefault Wajib Digunakan
Dalam penangan peristiwa saat menyeret di atas sasaran, Anda harus memanggil e.preventDefault(). Ini membatalkan perilaku bawaan peramban yang menolak peletakan. Tanpanya, kursor tetap menunjukkan "tidak diizinkan" dan peristiwa peletakan tidak pernah dipicu, apa pun tindakan pengguna.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});Peristiwa Masuk dan Keluar dari Sasaran
Peristiwa masuk sasaran dipicu sekali saat kursor memasuki sasaran; peristiwa keluar sasaran dipicu sekali saat kursor meninggalkannya. Gunakan keduanya untuk mengaktifkan sorotan visual "seret di atas sasaran": tambahkan kelas saat masuk dan hapus saat keluar agar pengguna dapat melihat area yang akan menerima peletakan.
Peristiwa Keluar Dipicu untuk Elemen Anak
Ada keunikan yang perlu diperhatikan: memindahkan kursor ke elemen anak akan memicu peristiwa keluar pada induk, lalu peristiwa masuk pada anak. Gunakan penghitung yang ditambah dalam peristiwa masuk dan dikurangi dalam peristiwa keluar, lalu hapus sorotan hanya saat penghitung kembali ke nol.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Menetapkan dropEffect
Di dalam peristiwa saat menyeret di atas sasaran, tetapkan e.dataTransfer.dropEffect = "move" (atau "copy", "link", "none") untuk mengendalikan kursor dan memberi tahu sumber tentang tindakan yang akan terjadi. Efek tersebut harus kompatibel dengan effectAllowed milik sumber, atau peletakan akan ditolak.
Membaca Data saat Meletakkan
Dalam penangan peristiwa peletakan, panggil e.dataTransfer.getData(format) dengan jenis MIME yang sama seperti yang digunakan oleh setData (biasanya "text/plain"). Kemudian cari elemen berdasarkan id, tambahkan elemen tersebut ke sasaran, perbarui model data, atau lakukan tindakan lain yang diperlukan aplikasi.
Mencegah Bawaan saat Meletakkan
Anda juga perlu memanggil e.preventDefault() dalam penangan peristiwa peletakan. Tanpanya, peramban kembali ke perilaku bawaannya — untuk URL yang diletakkan, itu berarti membuka tautan dan langsung menghapus keadaan halaman Anda.
Meletakkan dari Desktop
Peramban mengubah berkas yang diseret dari OS menjadi peristiwa peletakan dengan e.dataTransfer.files yang terisi. Ulangi melalui FileList dan baca setiap berkas dengan API Berkas untuk mendukung pengunggahan gambar, penampil berkas log, atau pengimpor dokumen.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Beberapa Jenis dalam dataTransfer
setData dapat menyimpan muatan yang sama di bawah beberapa jenis MIME: "text/plain" sebagai pengganti, "text/uri-list" untuk URL, dan "application/json" untuk muatan terstruktur. Sasaran peletakan memilih jenis paling lengkap yang dipahaminya melalui getData.
Mengoordinasikan dengan Peristiwa Sentuh
Peramban seluler tidak membuat peristiwa saat menyeret di atas sasaran atau peletakan dari sentuhan. Untuk pengalaman terpadu, gunakan Peristiwa Penunjuk ditambah pengujian sasaran secara manual, atau pustaka yang mengabstraksikan perbedaannya. DnD HTML5 bawaan sebaiknya diperlakukan hanya untuk desktop.
Kiat Kinerja
Peristiwa saat menyeret di atas sasaran dipicu terus-menerus saat kursor bergerak — sering kali puluhan kali per detik. Buat penangannya ringan: hindari kueri DOM atau pembacaan tata letak yang mahal di dalamnya. Simpan persegi panjang dalam peristiwa masuk dan gunakan kembali selama kursor tetap berada di atas sasaran.
Pemeriksaan Pengetahuan
Mengapa peristiwa peletakan tidak pernah dipicu pada sasaran sampai Anda memanggil e.preventDefault() dalam penangan peristiwa saat menyeret di atas sasaran?
Ringkasan
Sasaran peletakan yang berfungsi mendengarkan peristiwa saat menyeret di atas sasaran (selalu panggil preventDefault, dan secara opsional tetapkan dropEffect) serta peristiwa peletakan (panggil preventDefault lagi, lalu baca dataTransfer.getData atau dataTransfer.files). Gunakan peristiwa masuk/keluar dengan penghitung untuk sorotan, dan buat penangan tetap ringan karena peristiwa saat menyeret di atas sasaran sangat sering dipicu.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peristiwa dragover dan drop” gratis?
Ya — teks lengkap “Peristiwa dragover dan drop” 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 “Peristiwa dragover dan drop”?
Tentukan target pelepasan yang valid dan tangani peristiwa drop. 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 2 dari 4.
Berapa lama pelajaran “Peristiwa dragover dan drop” 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