Öğeleri Sürüklenebilir Hale Getirme
Sürüklemeyi etkinleştirin ve sürükleme olaylarını yönetin.
Öğeleri Sürüklenebilir Hale Getirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.
HTML Sürükle ve Bırak API'si
Yerel Drag and Drop API, kullanıcıların öğeleri tutup başka yerlere bırakmasını sağlar. Olay güdümlüdür: kaynak öğeler sürükleme olaylarını, bırakma hedefleri ise kendi olaylarını tetikler. Kitaplık gerekmez.
draggable Özniteliği
Varsayılan olarak yalnızca bağlantılar ve resimler sürüklenebilir. Herhangi bir öğeyi sürüklenebilir yapmak için draggable="true" ekleyin.
<div draggable="true" id="card">Drag me</div>JS ile draggable Ayarlama
Bu davranışı betik üzerinden draggable özelliğiyle açıp kapatabilirsiniz.
const card = document.getElementById("card");
card.draggable = true;dragstart Olayı
dragstart, sürükleme başladığı anda tetiklenir. Sürüklenen öğeyi kaydetmeniz gereken yer burasıdır.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});dataTransfer ile Veri Taşıma
Olay, dataTransfer değerini sunar. Sürüklemeyle birlikte taşınacak yükü eklemek için dragstart içinde setData(format, value) kullanın.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});drag Olayı
drag, öğe hareket ederken sürekli olarak tetiklenir. Tutumlu kullanın; saniyede birçok kez tetiklenebilir.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});dragend Olayı
Kullanıcı, bırakma işlemi başarılı olsun veya olmasın, öğeyi bıraktığında dragend tetiklenir. Kaynak öğenin biçimlendirmesini sıfırlamak için bunu kullanın.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Kaynak Öğeyi İşaretleme
Yaygın bir yaklaşım, sürüklenen öğeyi soluklaştırmak veya vurgulamak için dragstart sırasında bir sınıf eklemek ve dragend sırasında bunu kaldırmaktır.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));İzin Verilen Etkiler
Geçerli işlemleri bildirmek için dragstart içinde effectAllowed değerini ayarlayın: "copy", "move", "link" veya bunların birleşimleri.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Dokunmatik Cihazlarla İlgili Uyarı
Yerel API'nin mobil cihazlarda dokunmatik desteği sınırlıdır. Önceliği dokunmatik olan uygulamalar için İşaretçi Olaylarını veya özel bir kitaplığı değerlendirin; yerel API, masaüstünde daha iyi sonuç verir.
Metin Seçimini Devre Dışı Bırakma
Sürükleme sırasında yanlışlıkla metin seçilebilir. Küçük bir CSS kuralı, sürükleme işlemlerini temiz tutar.
/* CSS */
.draggable { user-select: none; }Kısa Kontrol
Sürüklenebilirlik temellerini sınayın.
Özet: Öğeleri Sürüklenebilir Yapma
draggable="true" ile sürüklemeyi etkinleştirdiniz, dragstart/drag/dragend olaylarını yönettiniz, dataTransfer.setData ile yük eklediniz, effectAllowed değerini ayarladınız ve kaynağı biçimlendirdiniz. Sırada bırakma hedefleri var.
Sıkça Sorulan Sorular
“Öğeleri Sürüklenebilir Hale Getirme” dersi ücretsiz mi?
Evet — “Öğeleri Sürüklenebilir Hale Getirme” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.
“Öğeleri Sürüklenebilir Hale Getirme” dersinde ne öğreneceğim?
Sürüklemeyi etkinleştirin ve sürükleme olaylarını yönetin. JavaScript 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.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 1. dersidir.
“Öğeleri Sürüklenebilir Hale Getirme” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript 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
- Öğeleri Sürüklenebilir Hale Getirme
- Bırakma Hedefleri ve dataTransfer
- Sürükleme Sırasında Görsel Geri Bildirim
- Dosyaları Sayfaya Sürükleme