HTML Academy · Ders

Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste

Drag and Drop API ile yeniden sıralanabilir bir liste oluşturun

Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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.

Desene Genel Bakış

Sürükleyerek yeniden sıralanan bir liste oluşturmak için her öğeyi sürüklenebilir yapın, dragstart sırasında sürüklenen öğenin kimliğini dataTransfer içinde saklayın ve bırakma sırasında sürüklenen öğeyi hedefin önüne veya arkasına ekleyin. Her bırakmadan sonra sıralamayı DOM'dan yeniden oluşturursanız DOM ile model eşzamanlı kalır.

İşaretleme

Her li öğesinde draggable="true" ve bir data-id bulunan düz bir liste oluşturun. Kimlikleri öğelerin üzerinde tutmak, sürükleme işleyicilerinin öğeleri belirlemek için ayrı bir durum deposunu sorgulamasını gerektirmez; doğruluğun temel kaynağı öğenin kendisidir.

<ul id="list">
  <li draggable="true" data-id="1">Item 1</li>
  <li draggable="true" data-id="2">Item 2</li>
  <li draggable="true" data-id="3">Item 3</li>
</ul>

dragstart Kaynağı Kaydeder

dragstart sırasında sürüklenen kimliği dataTransfer içinde saklayın ve görsel geri bildirim için "dragging" sınıfını uygulayın. effectAllowed="move", tarayıcıya bunun kopyalama değil yeniden sıralama işlemi olduğunu bildirir; böylece imleç ve dropEffect bir taşıma işlemini yansıtır.

list.addEventListener("dragstart", (e) => {
  const li = e.target.closest("li");
  if (!li) return;
  e.dataTransfer.setData("text/plain", li.dataset.id);
  e.dataTransfer.effectAllowed = "move";
  li.classList.add("dragging");
});

dragover Bırakmaya İzin Verir

Liste üzerinde (olay yetkilendirmesiyle) dinleyin, preventDefault çağrısı yapın ve dropEffect değerini "move" olarak ayarlayın. Üzerinde durulan satırı bulmak için e.target.closest("li") kullanın; böylece aynı işleyici tüm listeyle çalışır.

Ekleme Konumunu Hesaplama

Sürüklenen öğenin üzerinde durulan satırın üstüne mi yoksa altına mı yerleşeceğine karar vermek için imlecin Y konumunu satırın dikey orta noktasıyla karşılaştırın: const before = (e.clientY - rect.top) < rect.height / 2. before=true, insertBefore; false ise insertAfter anlamına gelir.

function getInsertBefore(target, clientY) {
  const rect = target.getBoundingClientRect();
  return clientY < rect.top + rect.height / 2;
}

drop DOM'u Yeniden Sıralar

drop işleyicisinde sürüklenen öğeyi kimliğine göre ve imlecin altındaki hedef satırı bulun. Hedefin hangi yarısı üzerinde durulduğuna bağlı olarak list.insertBefore(dragged, target) veya list.insertBefore(dragged, target.nextSibling) çağrısını yapın.

dragend Stilleri Temizler

Bırakma başarılı olsa da kullanıcı Escape tuşuna bassa da dragend her zaman kaynak üzerinde tetiklenir. Liste boşta durumuna dönsün diye "dragging" sınıfını ve bırakma hedefi vurgularını kaldırmak için bunu kullanın.

list.addEventListener("dragend", () => {
  list.querySelectorAll(".dragging, .over").forEach((el) => {
    el.classList.remove("dragging", "over");
  });
});

Görsel Bırakma Göstergesi

Öğenin yerleşeceği yerde, üzerinde durulan satırda CSS sözde öğesi kullanarak ince bir çizgi gösterin. Bu çizgiyi, dragover işleyicisinin imleç konumuna göre ayarladığı "over-top" veya "over-bottom" sınıfıyla açıp kapatın. Kullanıcı, bırakmadan önce ekleme noktasını görür.

Modeli Eşitleme

Bırakmadan sonra yeni sıralamayı DOM'dan türetin: const order = Array.from(list.children).map((li) => li.dataset.id). Bu diziyi sunucuya gönderin veya durum içinde saklayın; hızlı sürüklemelerde DOM ile uyumunu kaybeden ayrı bir dizini DOM'un yanında tutmaya çalışmayın.

Klavye Alternatifi

Odaklanmış öğeyi insertBefore ile taşıyan Yukarı/Aşağı işleyicileri ekleyin. Taşımayı bir aria-live bölgesi aracılığıyla duyurun ("Öğe 2. konuma yukarı taşındı"). Klavye kullanıcıları, görsel sürüklemeyi kullanmadan aynı işlevden yararlanır; bu, erişilebilirlik açısından çok önemlidir.

Dokunmaya Uygun Geri Dönüş

Mobil cihazlarda yerel sürükleme yerine Pointer Events kullanın: pointerdown sırasında satırı yakalayın, pointermove sırasında CSS transform ile hareket ettirin, pointerup sırasında altındaki satırı hit-test ile belirleyip yeniden sıralayın. SortableJS gibi kitaplıklar bu deseni farklı giriş türleri arasında kapsüller.

Bilgi Kontrolü

Ekleme konumunu, imlecin üzerinde durulan satırın dikey orta noktasına göre konumundan hesaplamamızın nedeni nedir?

Özet

Sağlam bir yeniden sıralama listesi draggable="true" + dragstart (kimliği kaydetme, effectAllowed=move) + dragover (preventDefault + gösterge konumu) + drop (orta noktadan türetilen yuvada insertBefore) + dragend (temizleme) birleşiminden oluşur. Bırakmadan sonra yeni sıralamayı her zaman DOM'dan türetin ve erişilebilirlik için bir klavye alternatifi sağlayın.

Sıkça Sorulan Sorular

“Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste” dersi ücretsiz mi?

Evet — “Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste” 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.

“Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste” dersinde ne öğreneceğim?

Drag and Drop API ile yeniden sıralanabilir bir liste oluşturun 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 4. dersidir.

“Uygulamalı Sürükleyerek Yeniden Sıralanabilir Liste” 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