JavaScript Academy · Pelajaran

Target Pelepasan dan dataTransfer

Terima pelepasan dan transfer data.

Target Pelepasan dan dataTransfer adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang Menjadikan Target Pelepasan?

Secara bawaan, elemen menolak pelepasan. Agar dapat menerima pelepasan, Anda harus mencegah perilaku bawaan pada dragover dan drop. Inilah kesalahan yang paling sering terjadi.

Mengizinkan Pelepasan Saat Diseret di Atas Target

Peramban memblokir pelepasan kecuali Anda memanggil preventDefault() di penangan dragover. Tanpanya, peristiwa drop tidak pernah terjadi.

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

Peristiwa Pelepasan

Saat pengguna melepaskan item di atas target yang valid, drop terjadi. Cegah perilaku bawaan di sini juga (tindakan ini mencegah peramban membuka berkas/URL yang dilepaskan), lalu baca datanya.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

Membaca dataTransfer

getData(format) mengambil data yang disimpan dalam dragstart. String format harus sama dengan yang ditetapkan.

const payload = e.dataTransfer.getData("text/plain");

Memindahkan Elemen

Salah satu penggunaan klasiknya adalah menambahkan simpul yang diseret ke zona pelepasan menggunakan id yang Anda kirimkan.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

Beberapa Format Data

dataTransfer dapat memuat beberapa format sekaligus — misalnya text/plain dan application/json — lalu target membaca format yang dipahaminya.

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

Menetapkan dropEffect

Dalam dragover, tetapkan dropEffect ke "copy", "move", atau "link" untuk mengatur kursor dan semantik operasinya.

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
});

effectAllowed vs dropEffect

effectAllowed (ditetapkan oleh sumber) menyatakan hal yang diizinkan; dropEffect (ditetapkan oleh target) memilih salah satunya. Keduanya bekerja sama untuk menampilkan kursor yang tepat.

Mengurutkan Ulang Daftar

Gabungkan posisi pelepasan dengan penyisipan untuk mengurutkan ulang item. Tentukan apakah item perlu disisipkan sebelum atau sesudah elemen yang berada di bawah kursor.

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

Mengidentifikasi Target Pelepasan

Gunakan e.target (elemen di bawah penunjuk) dan closest() untuk menemukan wadah yang relevan saat target saling bertingkat.

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

Menghapus Data

dataTransfer.clearData() mengosongkan data yang tersimpan; jika format diberikan, hanya format tersebut yang dihapus. Penyimpanan akan diatur ulang secara otomatis setelah proses seret selesai.

e.dataTransfer.clearData("text/plain");

Pemeriksaan Singkat

Uji target pelepasan.

Rangkuman: Target Pelepasan dan dataTransfer

Anda membuat zona pelepasan dengan memanggil preventDefault() pada dragover dan drop, membaca payload dengan getData, memindahkan dan mengurutkan ulang elemen, menetapkan dropEffect, serta menangani target bertingkat. Berikutnya: umpan balik visual.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Target Pelepasan dan dataTransfer” gratis?

Ya — teks lengkap “Target Pelepasan dan dataTransfer” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Target Pelepasan dan dataTransfer”?

Terima pelepasan dan transfer data. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 “Target Pelepasan dan dataTransfer” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

← Kembali ke JavaScript Academy