DndContext, useDraggable ve useDroppable

dnd-kit'teki her sürükle ve bırak özelliği bir DndContext bileşeniyle sarılmalıdır. DndContext koordinasyon merkezidir: etkin sürüklemeleri izler, sürüklenebilirlerle bırakılabilirler arasındaki iletişimi sağlar ve olay geri çağırmalarını çalıştırır. Genellikle bunu sürükleme durumunu yöneten bileşen düzeyine yerleştirirsiniz.

useDraggable({ id }) kancası bir bileşeni sürüklenebilir hâle getirir. Dört temel değer döndürür: öznitelikler (öğe üzerine yayılacak ARIA özellikleri), olay işleyicileri (sürüklemeyi başlatan olay işleyicileri), setNodeRef (sürüklenebilir başvurusunu bağlar) ve dönüşüm (geçerli çeviriyi {x, y, scaleX, scaleY} olarak belirtir).

Sürüklenebilir bir öğeyi bağlamak için attributes ve listeners değerlerini öğeye yayın ve setNodeRef değerini ref prop'u olarak geçirin. Öznitelikler arasında role="button", tabIndex ve ARIA özellikleri bulunur. Olay işleyicileri, dnd-kit'in sürükleme başlangıcını algılamak için ihtiyaç duyduğu fare, dokunmatik ekran ve klavye olaylarını bağlar.

useDraggable'dan gelen transform değeri sürükleme yapılmadığında null, sürükleme sırasında ise bir koordinat nesnesidir. Bu değeri @dnd-kit/utilities paketindeki CSS.Translate.toString(transform) ile bir CSS dizesine dönüştürün. Öğenin imleci görsel olarak izlemesi için bunu sürüklenebilir öğedeki transform CSS özelliğine uygulayın.

useDroppable({ id }) kancası bir kapsayıcıyı geçerli bir bırakma hedefi olarak işaretler. isOver (sürüklenebilir bir öğe bu bırakılabilir öğenin üzerinde durduğu sürece true olan bir boole değeri) ve başvuruyu bırakılabilir öğeye bağlamak için setNodeRef değerlerini döndürür. useDraggable'ın aksine yayınlanacak olay işleyicileri yoktur.

useDroppable'dan gelen isOver değeri, sürükleme sırasında görsel geri bildirim sağlamanıza olanak tanır. isOver true olduğunda bırakma bölgesine vurgu rengi, kenarlık veya arka plan değişikliği uygulayabilirsiniz. Bu, kullanıcıların öğeyi nereye bırakabileceklerini anlamasına yardımcı olur; bu da kullanılabilirlik ve erişilebilirlik açısından kritik öneme sahiptir.

DndContext üzerindeki onDragEnd geri çağırması, iki önemli özelliğe sahip bir olay nesnesi alır: event.active sürüklenen öğeyi (özellikle id değerini), event.over ise bırakma hedefini içerir; öğe herhangi bir bırakılabilir alanın dışına bırakıldıysa bu değer null olur. Uygulama durumunuzu güncellemek için bu kimlikleri kullanırsınız.

onDragEnd içinde, event.over değerinin boş olmadığını kontrol ettikten sonra, taşımayı yansıtacak şekilde durumunuzu güncellersiniz. Örneğin, bir Kanban panosunda bir kartı sütunlar arasında taşıyorsanız kartı kaynak sütundan kaldırır ve event.over.id tarafından tanımlanan hedef sütuna eklersiniz.

DragOverlay, imleci takip eden, sürüklenen öğenin yüzen bir önizlemesini oluşturur. Normal DOM ağacının dışında bir portal olarak oluşturulduğu için taşması gizlenen kapsayıcılar tarafından hiçbir zaman kırpılmaz. Özgün öğeden farklı olarak kaplama, sürüklendiğini belirtmek için gölgeler, ölçek dönüşümleri veya döndürme kullanabilir.

DragOverlay içinde doğru içeriği oluşturmak için, onDragStart geri çağırma işlevini kullanarak o anda sürüklenen öğeyi takip edin. Etkin ID'yi durum içinde saklayın: setActiveDragId(event.active.id). onDragEnd içinde bunu boş olarak sıfırlayın. DragOverlay içinde activeDragId kullanarak doğru öğeyi bulun ve oluşturun.

Gerçek bir sürükle ve bırak arayüzü, DndContext'i, birden çok useDraggable öğesini, birden çok useDroppable bölgesini ve her öğenin nerede olduğunu takip edecek durum yönetimini bir araya getirir. Temel fikir şudur: dnd-kit mekanikleri sağlar; yeni düzeni yansıtmak için durumu onDragEnd içinde güncellemek ve arayüzü yeniden oluşturmak sizin görevinizdir.

useDraggable'dan alınan transform nesnesini CSS dönüşüm dizesine dönüştüren yardımcı işlev hangisidir?

DndContext, tüm dnd-kit sürükleme işlemlerinin koordinasyon merkezidir. useDraggable, sürüklenebilir öğeler için öznitelikler, dinleyiciler, setNodeRef ve dönüşüm sağlar. useDroppable, bırakma hedefleri için isOver ve setNodeRef sağlar. onDragEnd size event.active.id ve event.over?.id değerlerini vererek durumu güncellemenizi sağlar. DragOverlay, portal tabanlı yüzen bir önizleme oluşturur.