HTML Academy · Ders

dragover ve drop Olayları

Geçerli bırakma hedefleri tanımlayın ve drop olayını yönetin

dragover ve drop Olayları, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. 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.

Bırakma Hedeflerinin İki İşleyiciye İhtiyacı Vardır

Bir bırakma hedefi hem sürükleme üzeri olayını (bırakmaya izin vermek için) hem de bırakma olayını (veriyi almak için) işlemelidir. Sürükleme üzeri olayı olmadan tarayıcı, varsayılan davranış "hiçbir öğe bırakma hedefi değildir" olduğu için bırakma olayını tetiklemeyi reddeder.

preventDefault Zorunludur

Sürükleme üzeri işleyicisinde e.preventDefault() çağrısını yapmalısınız. Bu çağrı, bırakma işlemini reddeden tarayıcı varsayılanını iptal eder. Çağrı yapılmazsa imleç "izin verilmiyor" biçiminde kalır ve kullanıcı ne yaparsa yapsın bırakma olayı tetiklenmez.

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

Sürükleme Giriş ve Çıkış Olayları

İmleç hedefe girdiğinde sürükleme giriş olayı bir kez; hedefin dışına çıktığında ise sürükleme çıkış olayı bir kez tetiklenir. Görsel bir "sürükleme üzeri" vurgusunu açıp kapatmak için bunları kullanın: girişte sınıf ekleyin, çıkışta kaldırın; böylece kullanıcı bırakma işlemini hangi alanın alacağını görür.

Sürükleme Çıkışı Alt Öğeler için de Tetiklenir

İnce bir ayrıntı şudur: İmlecin bir alt öğenin üzerine taşınması, önce üst öğede sürükleme çıkışı, ardından alt öğede sürükleme girişi olayını tetikler. Sürükleme girişinde artırılan, sürükleme çıkışında azaltılan bir counter kullanın; vurguyu yalnızca counter sıfıra döndüğünde kaldırın.

let counter = 0;
zone.addEventListener("dragenter", () => {
  counter++;
  zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
  counter--;
  if (counter === 0) zone.classList.remove("over");
});

dropEffect Ayarlama

Sürükleme üzeri olayının içinde e.dataTransfer.dropEffect = "move" (veya "copy", "link", "none") ayarını yaparak imleci denetleyin ve kaynağa ne olacağını bildirin. Etki, kaynağın effectAllowed değeriyle uyumlu olmalıdır; aksi hâlde bırakma reddedilir.

Bırakma Sırasında Verileri Okuma

Bırakma işleyicisinde, setData ile kullanılan MIME türünün aynısını kullanarak e.dataTransfer.getData(format) çağrısını yapın (yaygın olarak "text/plain"). Ardından öğeyi kimliğine göre bulun, hedefe ekleyin, bir veri modelini güncelleyin veya uygulamanın gerektirdiği işlemi gerçekleştirin.

Bırakma Sırasında Varsayılanı Engelleme

Bırakma işleyicisinde ayrıca e.preventDefault() kullanmanız gerekir. Aksi hâlde tarayıcı yerel davranışına geri döner; bırakılan bir URL için bu, bağlantıya gitmek anlamına gelir ve sayfanızın durumunu hemen yok eder.

Masaüstünden Bırakma

Tarayıcı, işletim sisteminden sürüklenen dosyaları e.dataTransfer.files doldurulmuş bir bırakma olayına dönüştürür. Görüntü yüklemelerini, günlük dosyası görüntüleyicilerini veya belge içe aktarıcılarını desteklemek için FileList üzerinde yineleme yapın ve her dosyayı Dosya API'siyle okuyun.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  for (const file of e.dataTransfer.files) {
    console.log(file.name, file.size);
  }
});

dataTransfer İçinde Birden Çok Tür

setData aynı yükü çeşitli MIME türleri altında saklayabilir: geri dönüş için "text/plain", URL'ler için "text/uri-list" ve yapılandırılmış yükler için "application/json". Bırakma hedefi, getData aracılığıyla anlayabildiği en kapsamlı türü seçer.

Dokunma Olaylarıyla Eşgüdüm

Mobil tarayıcılar dokunma hareketlerinden sürükleme üzeri ve bırakma olaylarını kendiliğinden oluşturmaz. Birleşik bir deneyim için İşaretçi Olaylarını elle çarpışma testiyle birlikte kullanın veya farklılıkları soyutlayan bir kitaplıktan yararlanın. Yerel HTML5 sürükle ve bırak desteğini en iyi masaüstüne özgü bir özellik olarak değerlendirin.

Performans İpucu

Sürükleme üzeri olayı, imleç hareket ettiği sürece sürekli tetiklenir; saniyede genellikle onlarca kez çalışır. İşleyiciyi ucuz tutun: içinde pahalı DOM sorgularından veya düzen okumalarından kaçının. Dikdörtgenleri sürükleme girişinde önbelleğe alın ve imleç hedefin üzerinde kaldığı sürece yeniden kullanın.

Bilgi Kontrolü

Sürükleme üzeri işleyicisinde e.preventDefault() çağrılana kadar bırakma olayı hedefte neden hiç tetiklenmez?

Özet

Çalışan bir bırakma hedefi sürükleme üzeri olayını (her zaman preventDefault çağrısı yaparak, isteğe bağlı olarak dropEffect ayarlayarak) ve bırakma olayını (yeniden preventDefault çağrısı yapıp ardından dataTransfer.getData veya dataTransfer.files okuyarak) dinler. Vurgu için sürükleme giriş ve çıkış olaylarını counter ile birlikte kullanın ve sürükleme üzeri olayı çok sık tetiklendiği için işleyicileri hafif tutun.

Sıkça Sorulan Sorular

“dragover ve drop Olayları” dersi ücretsiz mi?

Evet — “dragover ve drop Olayları” 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.

“dragover ve drop Olayları” dersinde ne öğreneceğim?

Geçerli bırakma hedefleri tanımlayın ve drop olayını yönetin 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 2. dersidir.

“dragover ve drop Olayları” 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

← HTML Academy Sayfasına Dön