Sürükleme Sırasında Görsel Geri Bildirim
Sürükleme işlemleri sırasında öğeleri stillendirin.
Sürükleme Sırasında Görsel Geri Bildirim, CoddyKit'te ücretsiz bir JavaScript 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, 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.
Görsel geri bildirim neden önemlidir
İyi tasarlanmış bir sürükleyip bırakma etkileşimi kullanıcıya neler olduğunu bildirir: hangi öğenin taşındığını, nereye bırakılabileceğini ve bırakma işleminin geçerli olup olmadığını gösterir. Geri bildirim olmadığında etkileşim bozukmuş gibi görünür.
Sürüklenen öğeyi biçimlendirme
Kullanıcının hangi öğeyi seçtiğini görmesi için dragstart sırasında kaynak öğeyi soluklaştırın veya ölçeklendirin.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));dragenter olayı
dragenter, sürüklenen öğe olası bir hedefe girdiğinde tetiklenir. Bırakma alanını vurgulamak için bunu kullanın.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});dragleave olayı
dragleave, öğe hedeften ayrıldığında tetiklenir. Vurgulamayı burada kaldırın.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});Titreme sorunu
dragenter/dragleave, alt öğeler için de tetiklenir ve bu durum titremeye neden olur. Bir sayaç veya relatedTarget denetimi, vurgulamanın kararlı kalmasını sağlar.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Bırakma sırasında sıfırlama
Başarılı bir bırakma işleminde dragleave tetiklenmeyebileceği için vurgulama durumunu her zaman drop işleyicisinde temizleyin.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Sürükleme görselini özelleştirme
dragstart sırasında kullanılan setDragImage(element, offsetX, offsetY), varsayılan hayalet görseli herhangi bir öğeyle değiştirir.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});dropEffect ile imleci denetleme
İmleç (kopyalama için artı işareti, taşıma için ok, bırakma yok işareti), dragover sırasında ayarlanan dropEffect tarafından belirlenir. Geçersiz bırakma işlemlerini "none" ile reddedin.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Bırakma yer tutucusu gösterme
Sıralanabilir listelerde, kullanıcıların öğenin tam olarak nereye bırakılacağını görmesi için öngörülen bırakma konumuna bir yer tutucu öğe ekleyin.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Ekleme konumunu hesaplama
Öğenin önüne mi yoksa arkasına mı bırakılacağına karar vermek için işaretçinin Y konumunu her öğenin dikey orta noktasıyla karşılaştırın.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Erişilebilir geri bildirim
Yalnızca görsel ipuçları kullanmak, klavye ve ekran okuyucu kullanıcılarını dışarıda bırakır. Erişilebilirlik için sürükleyip bırakma işlemini ARIA canlı duyuruları ve bir klavye alternatifiyle destekleyin.
Kısa kontrol
Görsel geri bildirimi deneyin.
Özet: Görsel geri bildirim
Sürüklenen öğeyi biçimlendirdiniz, dragenter/dragleave ile alanları vurguladınız, titremeyi derinlik sayacıyla çözdünüz, sürükleme görselini özelleştirdiniz, imleci dropEffect ile denetlediniz ve bırakma yer tutucuları gösterdiniz. Sırada dosyaları sürükleyerek içeri alma var.
Sıkça Sorulan Sorular
“Sürükleme Sırasında Görsel Geri Bildirim” dersi ücretsiz mi?
Evet — “Sürükleme Sırasında Görsel Geri Bildirim” 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.
“Sürükleme Sırasında Görsel Geri Bildirim” dersinde ne öğreneceğim?
Sürükleme işlemleri sırasında öğeleri stillendirin. 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 3. dersidir.
“Sürükleme Sırasında Görsel Geri Bildirim” 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