HTML Drag and Drop
Önceki Geolocation izinden sonra koordinat istiyordu. Bu ders koordinatı bırakır ve HTML Drag and Drop’u tanıtır: ne sürükleneceğini işaretlemek, dataTransfer ile küçük yük, drop’ta karar. Kapsam pratik — draggable, preventDefault, taşı veya etiketle — sortable kütüphanesi veya dosya yükleme uygulaması değil.
HTML kursunda neden drag and drop
Yeni başlayanlar sıkça kartı kutuya sürüklemek ister. Yerel DnD ilk yaygın API’dir. Geolocation’dan sonra bölünme farklıdır: HTML kaynakları işaretler; JS olaylara ve drop anlamına sahiptir.
Doğrudan yanıt
1) draggable="true". 2) dragstart’ta setData. 3) dragover’da preventDefault. 4) drop’ta getData ve DOM/UI değiştirin. 5) Özel dropzone etiketi yok. 6) Önemliyse düğme/klavye yolu.
📊 dragstart vs dragover vs drop
| Topic | dragstart | dragover | drop |
|---|---|---|---|
| Typical role | Start drag; set dataTransfer | Allow drop (preventDefault) | Apply the result |
| Runs on | Draggable source | Potential target (often) | Drop target |
| Must preventDefault? | Usually no | Yes — so drop can fire | Yes — avoid default navigation quirks |
| Beginner payload | setData("text/plain", id) | — | getData + move/label |
| This course depth | Required | Required | Required (simple move/label) |
Küçücük bölgeye taşıma demosu
Mavi kutu sürüklenebilir; bırakınca bölgeye girer. dragover’da preventDefault yoksa drop çoğu zaman çalışmaz.
<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", "item");
});
zone.addEventListener("dragover", function (e) {
e.preventDefault();
});
zone.addEventListener("drop", function (e) {
e.preventDefault();
zone.appendChild(item);
});
</script>
Taşıma çağrılarını okumak
- draggable jesti başlatır
- dragstart dataTransfer koyar
- dragover + preventDefault drop’a izin verir
- drop DOM’u değiştirir
- Geolocation’dan farklı: cihaz koordinatı yok
- Demoyu küçük tutun
dataTransfer yük demosu
Bazen aynı düğümü taşımazsınız — metin taşıyıp bırakınca gösterirsiniz; birden fazla kaynak bir hedefi paylaşır.
<p id="a" draggable="true" style="display:inline-block;padding:6px;background:#fec;margin-right:8px;">Alpha</p>
<p id="b" draggable="true" style="display:inline-block;padding:6px;background:#cfe;margin-right:8px;">Beta</p>
<div id="tray" style="margin-top:12px;padding:16px;border:2px dashed #444;">Drop a label here</div>
<pre id="note"></pre>
<script>
const tray = document.getElementById("tray");
const note = document.getElementById("note");
function arm(id, label) {
document.getElementById(id).addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", label);
});
}
arm("a", "Alpha");
arm("b", "Beta");
tray.addEventListener("dragover", function (e) {
e.preventDefault();
});
tray.addEventListener("drop", function (e) {
e.preventDefault();
note.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});
</script>
dataTransfer fikrini okumak
- setData/getData kısa dize taşır
- text/plain yeni başlayan dostu
- Birden fazla kaynak, bir hedef
- Dosya yükleme ürünü değil
- Geolocation değil
- Sonraki: web workers
DnD ne zaman kullanılır
- Kartı net bölgeye: iyi intro
- Alternatifsiz kritik işlem: kötü
- Tema: Web Storage
- GPS: Geolocation’dı
- Tam kanban: bu girişin ötesi
Alıştırma — sürükleyin, bırakın, etiketleyin
- Taşıma demosunu deneyin.
- preventDefault’u kısa süre kaldırıp drop başarısızlığını görün.
- dataTransfer demosunu deneyin.
- İsteğe bağlı: sürüklemesiz düğme.
- Cümle: Geolocation koordinat okur; DnD taşır veya etiketler.
- Gerçek tarayıcı penceresi tercih edin.
- İleri: web workers.
Kolay hatalar
- dragover’da preventDefault unutmak
- Alternatifsiz yalnız-DnD UI
- dropzone etiketi beklemek
- Geolocation ile karıştırmak
- Düğme yerine DnD’yi aşırı kullanmak
- Girişi tam sortable kursu saymak
Özet
- DnD: draggable, dataTransfer ve üç olay
- dragover’da preventDefault sıkça gerekir
- HTML kaynakları işaretler; betik drop’u tanımlar
- Gerekirse sürüklemesiz yol sunun
- Geolocation koordinatlardı; bu ders işaretçiyle taşı/etiketle
- Sonraki: web workers
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek