Objek dataTransfer
Pindahkan data antara sumber seret dan target pelepasan.
Objek dataTransfer adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Isi dataTransfer
Objek dataTransfer terpasang pada setiap peristiwa penyeretan dan merupakan satu-satunya saluran komunikasi antara sumber dan sasaran. Objek ini membawa data muatan, daftar berkas, efek yang diizinkan, serta efek peletakan yang dipilih.
setData dan getData
Sumber menulis muatan bertipe dengan e.dataTransfer.setData(format, value). Sasaran membacanya dengan e.dataTransfer.getData(format). Kedua argumen berupa string; nilai diubah menjadi string sebelum disimpan.
src.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "hello");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});Beberapa Jenis MIME
Menyimpan muatan yang sama dalam beberapa jenis membuat penyeretan dapat digunakan lintas aplikasi: "text/plain" berfungsi di editor teks apa pun, "text/uri-list" dikenali peramban sebagai URL, dan "text/html" mempertahankan pemformatan dalam pengolah kata. Sasaran memilih jenis yang dipahaminya.
Pembatasan Pembacaan di Luar Peletakan
Demi privasi, peramban hanya menampilkan daftar jenis — bukan nilainya — kepada penangan peristiwa masuk dan saat menyeret di atas sasaran melalui e.dataTransfer.types. Data sebenarnya hanya dapat dibaca di dalam peristiwa peletakan pada sasaran yang menerima.
Daftar Berkas
Saat pengguna menyeret dari desktop, e.dataTransfer.files adalah FileList yang berisi objek berkas. Daftar ini kosong untuk penyeretan yang berasal dari dalam halaman. Perlakukan daftar ini sebagai cara kanonis untuk mendeteksi peletakan berkas eksternal dan mengakses ukuran, nama, serta jenisnya.
Koleksi Item
e.dataTransfer.items menampilkan string dan berkas sebagai objek DataTransferItem. Setiap item memiliki kind ("string" atau "file"), type (MIME), dan getAsString(cb) / getAsFile(). Koleksi item adalah alternatif modern yang memahami jenis, sebagai pengganti files + getData.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
} else {
item.getAsString((s) => console.log(item.type, s));
}
}effectAllowed dibandingkan dengan dropEffect
effectAllowed ditetapkan oleh sumber dalam peristiwa mulai menyeret dan mencantumkan operasi yang didukung sumber. dropEffect ditetapkan oleh sasaran dalam peristiwa saat menyeret di atas sasaran dan memilih salah satu operasi tersebut. Peramban membatalkan peletakan jika keduanya tidak sesuai.
Gambar Seret Khusus
e.dataTransfer.setDragImage(node, x, y) menggantikan bayangan bawaan. Teruskan elemen DOM di luar layar yang gayanya disesuaikan, beserta jarak kursor relatif terhadap elemen tersebut. Perubahan ini hanya berlaku untuk penyeretan saat ini.
clearData
e.dataTransfer.clearData() menghapus semua format; clearData("text/plain") menghapus satu format. Ini jarang diperlukan karena dataTransfer dibuat baru untuk setiap penyeretan, tetapi berguna saat Anda mulai mengisi data lalu memutuskan untuk membatalkannya.
Perilaku Lintas Asal
Berkas yang diseret dari halaman pada asal A ke halaman pada asal B tetap dikirimkan — API ini berfungsi lintas asal. Namun, halaman penerima hanya melihat data yang secara eksplisit ditempatkan sumber di dataTransfer; akses DOM sembarang tidak diberikan.
Menyeret dari Peramban ke Desktop
Dengan menulis jenis "DownloadURL" (setData("DownloadURL", "image/png:filename.png:https://...")), halaman dapat memungkinkan pengguna menyeret berkas keluar dari peramban ke desktop. Dukungan peramban terbatas (peramban berbasis Chromium), jadi lakukan deteksi dan sediakan pengganti dengan baik.
Pemeriksaan Pengetahuan
Mengapa dataTransfer.getData() tidak diizinkan mengembalikan nilai yang sebenarnya disimpan selama peristiwa dragover?
Ringkasan
dataTransfer adalah jembatan antara sumber seret dan target penjatuhan. Gunakan setData/getData untuk muatan string bertipe, items untuk tampilan terpadu file dan string, files untuk penjatuhan dari desktop, setDragImage untuk pratinjau khusus, serta effectAllowed/dropEffect untuk menegosiasikan operasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Objek dataTransfer” gratis?
Ya — teks lengkap “Objek dataTransfer” 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 “Objek dataTransfer”?
Pindahkan data antara sumber seret dan target pelepasan. 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 3 dari 4.
Berapa lama pelajaran “Objek 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 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