dataTransfer Nesnesi
Sürükleme kaynağı ile bırakma hedefi arasında veri aktarın
dataTransfer Nesnesi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
dataTransfer Neleri Tutar
dataTransfer nesnesi her sürükleme olayına eklenir ve kaynakla hedef arasındaki tek iletişim kanalıdır. Yük verilerini, dosya listelerini, izin verilen etkileri ve seçilen bırakma etkisini taşır.
setData ve getData
Kaynak, tür bilgisi içeren yükleri e.dataTransfer.setData(format, value) ile yazar. Hedef bunları e.dataTransfer.getData(format) ile okur. Her iki bağımsız değişken de dizedir; değerler saklanmadan önce dizeye dönüştürülür.
src.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "hello");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});Birden Çok MIME Türü
Aynı yükün birkaç tür altında saklanması, sürükleme işlemini farklı uygulamalarla uyumlu hâle getirir: "text/plain" tüm metin düzenleyicilerinde çalışır, "text/uri-list" tarayıcılar tarafından URL olarak tanınır ve "text/html" kelime işlemcilerinde biçimlendirmeyi korur. Hedef, anlayabildiği türü seçer.
Bırakma Dışında Okuma Kısıtlamaları
Tarayıcı, gizlilik amacıyla sürükleme giriş ve sürükleme üzeri işleyicilerine e.dataTransfer.types aracılığıyla yalnızca tür listesini, değerleri değil, sunar. Gerçek veriler yalnızca kabul eden bir hedefin bırakma olayı içinde okunabilir.
Dosyalar Listesi
Kullanıcı masaüstünden sürüklediğinde e.dataTransfer.files, Dosya nesnelerinden oluşan bir FileList'tir. Sayfa içinde başlayan sürüklemelerde boştur. Harici bir dosya bırakma işlemini algılamak ve boyut, ad ve tür bilgilerine erişmek için bunu temel yöntem olarak kullanın.
Öğeler Koleksiyonu
e.dataTransfer.items, hem dizeleri hem de dosyaları DataTransferItem nesneleri olarak sunar. Her öğede kind ("string" veya "file"), type (MIME) ve getAsString(cb) / getAsFile() bulunur. items, files ile getData birleşiminin modern ve tür bilgili alternatifidir.
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 ve dropEffect Karşılaştırması
effectAllowed, sürükleme başlangıcında kaynak tarafından ayarlanır ve kaynağın desteklediği işlemleri listeler. dropEffect ise sürükleme üzeri olayında hedef tarafından ayarlanır ve bu işlemlerden birini seçer. İki değer uyuşmazsa tarayıcı bırakma işlemini iptal eder.
Özel Sürükleme Görüntüsü
e.dataTransfer.setDragImage(node, x, y) varsayılan hayalet görüntünün yerine geçer. Zevkinize göre stillendirilmiş, ekran dışında bulunan bir DOM öğesini ve imlecin o öğeye göre konumunu aktarın. Değişiklik yalnızca mevcut sürükleme işlemi için geçerlidir.
clearData
e.dataTransfer.clearData() tüm biçimleri siler; clearData("text/plain") ise tek bir biçimi kaldırır. dataTransfer her sürükleme işleminde yeni oluşturulduğu için buna nadiren ihtiyaç duyulur; ancak veri doldurmaya başlayıp sonra işlemi iptal etmeye karar verdiğinizde yararlıdır.
Kaynaklar Arası Davranış
Kaynak A'daki bir sayfadan kaynak B'deki bir sayfaya sürüklenen dosyalar yine teslim edilir; API kaynaklar arasında çalışır. Ancak alıcı sayfa, kaynağın dataTransfer içine açıkça yerleştirdiği verileri görür; rastgele DOM erişimine izin verilmez.
Tarayıcıdan Masaüstüne Sürükleme
Bir sayfa, "DownloadURL" türünü yazarak (setData("DownloadURL", "image/png:filename.png:https://...")) kullanıcının bir dosyayı tarayıcı dışına, masaüstüne sürüklemesine izin verebilir. Tarayıcı desteği sınırlıdır (Chromium tabanlı tarayıcılar); bu nedenle özelliği algılayın ve uygun bir geri dönüş sağlayın.
Bilgi Kontrolü
dragover olayı sırasında dataTransfer.getData() yönteminin depolanan gerçek değeri döndürmesine neden izin verilmez?
Özet
dataTransfer, sürükleme kaynağı ile bırakma hedefi arasındaki köprüdür. Türü belirtilmiş dize yükleri için setData/getData, birleşik dosya ve dize görünümü için items, masaüstü bırakmaları için files, özel önizlemeler için setDragImage ve işlemi karşılıklı belirlemek için effectAllowed/dropEffect kullanın.
Sıkça Sorulan Sorular
“dataTransfer Nesnesi” dersi ücretsiz mi?
Evet — “dataTransfer Nesnesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“dataTransfer Nesnesi” dersinde ne öğreneceğim?
Sürükleme kaynağı ile bırakma hedefi arasında veri aktarın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“dataTransfer Nesnesi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- draggable Özniteliği ve dragstart Olayı
- dragover ve drop Olayları
- dataTransfer Nesnesi
- Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste