Akademi JavaScript · Pelajaran

Sasaran Lepas dan dataTransfer

Terima operasi lepas dan pindahkan data.

Pelajaran 2 daripada 413 langkah

Sasaran Lepas dan dataTransfer ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang Menjadikan target Pelepasan?

Secara lalai, elemen menolak pelepasan. Untuk menerima pelepasan, anda mesti menghalang tingkah laku lalai pada kedua-dua dragover dan drop. Inilah perangkap yang paling biasa.

Membenarkan Pelepasan dengan Seretan Atas

Pelayar menyekat tindakan melepaskan item melainkan anda memanggil preventDefault() dalam pengendali dragover. Tanpanya, peristiwa drop tidak akan dicetuskan.

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

Peristiwa Pelepasan

Apabila pengguna melepaskan item di atas sasaran yang sah, drop akan dicetuskan. Cegah tindakan lalai di sini juga kerana ia menghalang pelayar daripada membuka fail atau alamat yang dilepaskan, kemudian baca datanya.

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

Membaca dataTransfer

getData(format) mendapatkan semula perkara yang disimpan dalam dragstart. Rentetan format itu mesti sepadan dengan format yang ditetapkan.

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

Mengalihkan Elemen

Kegunaan klasiknya adalah dengan menambahkan nod yang diseret ke dalam zon pelepasan menggunakan pengenal yang anda pindahkan.

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

Pelbagai Format Data

dataTransfer boleh menyimpan beberapa format serentak — contohnya text/plain dan application/json — dan sasaran akan membaca format yang difahaminya.

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

Menetapkan dropEffect

Dalam dragover, tetapkan dropEffect kepada "copy", "move" atau "link" untuk mengawal kursor dan semantik operasi.

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

effectAllowed berbanding dropEffect

effectAllowed (ditetapkan oleh sumber) menyatakan perkara yang dibenarkan; dropEffect (ditetapkan oleh sasaran) memilih salah satu daripadanya. Kedua-duanya bekerjasama untuk memaparkan kursor yang betul.

Menyusun Semula Senarai

Gabungkan kedudukan pelepasan dengan penyisipan untuk menyusun semula item. Tentukan sama ada item perlu disisipkan sebelum atau selepas 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);
});

Mengenal Pasti Sasaran Pelepasan

Gunakan e.target (elemen di bawah penuding) dan closest() untuk mencari bekas yang berkaitan apabila sasaran bersarang.

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

Mengosongkan Data

dataTransfer.clearData() mengosongkan data yang disimpan; pemberian satu format hanya mengosongkan format itu. Ruang simpanan itu tetap ditetapkan semula secara automatik selepas seretan selesai.

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

Semakan Pantas

Uji sasaran pelepasan.

Jawab dalam pelajaran interaktif

Imbas Kembali: Sasaran Pelepasan dan dataTransfer

Anda mencipta zon pelepasan dengan memanggil preventDefault() pada dragover dan drop, membaca muatan dengan getData, mengalihkan dan menyusun semula elemen, menetapkan dropEffect, serta mengendalikan sasaran bersarang. Seterusnya: maklum balas visual.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Sasaran Lepas dan dataTransfer” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Sasaran Lepas dan dataTransfer”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Sasaran Lepas dan dataTransfer”?

Terima operasi lepas dan pindahkan data. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Sasaran Lepas dan dataTransfer” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript