draggable Özniteliği ve dragstart Olayı

draggable="true" ayarlandığında herhangi bir öğe sürükleme kaynağı hâline gelir. Bağlantılar ve görüntüler varsayılan olarak sürüklenebilir; diğer her şey (div, li ve span öğeleri) için bu özniteliğin açıkça belirtilmesi gerekir. draggable="false" ise bir öğeyi yerel sürükleme işleminin dışında bırakır.

Kullanıcı sürüklemeyi başlattığında kaynak öğe, sürükleme başlangıcı olayını tetikler. Sürüklemeyi burada başlatırsınız: hangi öğenin taşındığını kaydedin, isteğe bağlı olarak öğeye stil uygulayın ve bırakma hedefinin okuyacağı verileri dataTransfer nesnesine yazın.

Bir öğeyi sürüklenebilir olarak işaretleyip sürükleme başlangıcını hiç işlemezseniz tarayıcı yine de bir hayalet görüntüyü sürükler; ancak hiçbir veri ayarlanmadığı için çoğu bırakma hedefi bırakma işlemini reddeder. Sürüklenebilir özniteliğini her zaman, en azından bir tanımlayıcı saklayan bir sürükleme başlangıcı dinleyicisiyle birlikte kullanın.

e.dataTransfer.effectAllowed = "move" ifadesi, sürükleme başlangıcında işlemi sınırlar: "copy", "move", "link", "copyMove", "all" veya "none". Bu ayar, tarayıcının gösterdiği imleci ve hedefin daha sonra ayarlayabileceği dropEffect değerini belirler.

Kaynak sürüklenirken soluk görünmesi için ona bir CSS sınıfı ekleyin: card.classList.add("dragging"). Stil, bırakma işlemi başarılı olsa da Escape ile iptal edilse de temizlensin diye sınıfı dragend olayında kaldırın.

Varsayılan olarak tarayıcı, kaynağın yarı saydam bir anlık görüntüsünü sürükler. e.dataTransfer.setDragImage(node, offsetX, offsetY) ile bunu değiştirin; imlecin yanında özel bir önizleme göstermek için gizli bir DOM öğesi veya bir görüntü aktarın.

dragend, sürükleme tamamlandıktan sonra; işlem başarıyla bırakılmış, geçersiz bir hedefe bırakılmış veya iptal edilmiş olsa da kaynak üzerinde tetiklenir. Temizlik için kullanın: sürükleme sınıfını kaldırın, hayalet önizlemeleri gizleyin ve opaklığı geri yükleyin.

Sürükleme bitişi içinde e.dataTransfer.dropEffect değerini denetleyin. Değer "none" ise bırakma gerçekleşmemiştir (hedef reddetmiş, kullanıcı Escape tuşuna basmış veya öğe sayfanın dışına bırakılmış olabilir). Aksi durumda değer, bırakma hedefinin seçtiği etkiye ("move", "copy", "link") eşittir.

Yerel sürükle ve bırak desteği masaüstü önceliklidir. Dokunmatik cihazlarda çoklu doldurma veya İşaretçi Olayları tabanlı bir alternatif olmadan API neredeyse çalışmaz. Mobil uyumlu yeniden sıralama arayüzleri için her iki olay modelini de soyutlayan SortableJS veya dnd-kit gibi kitaplıkları tercih edin.

Yerel sürükle ve bırak klavyeyle erişilebilir değildir; yalnızca klavye kullanan kullanıcılar öğeleri yeniden sıralayamaz. Her zaman bir alternatif sunun: ok tuşu işleyicileri, yukarı taşı/aşağı taşı düğmeleri veya aria ile denetlenen bir yeniden sıralama iletişim kutusu. Sürükle ve bırak, erişilebilirliğin yerini almamalı; onu geliştirmelidir.

Sürüklenebilir öğelerin içindeki metin seçimi, sürükleme işlemine müdahale edebilir. Tarayıcının metni seçmek yerine öğeyi sürüklemesi için kaynak üzerinde CSS user-select: none ve -webkit-user-drag: element uygulayın.

draggable="true" özniteliği tek başına bir öğeyi sürüklenebilir hâle getirdiği hâlde neden genellikle bir sürükleme başlangıcı dinleyicisi eklemeniz gerekir?

Kaynakları draggable="true" ile işaretleyin; dataTransfer verilerini doldurmak, effectAllowed değerini ayarlamak ve isteğe bağlı olarak özel bir sürükleme görüntüsü kullanmak için sürükleme başlangıcı olayını kullanın. Stilleri temizlemek için bunu sürükleme bitişi olayıyla birlikte kullanın. Erişilebilirlik için klavye alternatifleri sağlayın ve dokunmatik kullanım için çoklu doldurmaları değerlendirin.