Özel Sürükleme Katmanları ve Çok Kapsayıcılı DnD

DragOverlay, içeriğini React portalı olarak oluşturur ve DndContext DOM ağacının içine değil, doğrudan document.body'ye ekler. Bu nedenle taşmanın gizlendiği veya kaydırıldığı kapsayıcılar tarafından hiçbir zaman kırpılmaz ve elle katman sırası yönetimi gerektirmeden her zaman diğer tüm öğelerin üzerinde görünür.

DragOverlay özgün öğeden ayrı olduğu için, özgün öğeye uygulandığında düzeni bozabilecek görsel stillere sahip olabilir. Gölge, ölçek dönüşümü (onu özgün öğeden biraz daha büyük yapma) veya döndürme efekti ekleyebilirsiniz. Bu görsel ipuçları, kullanıcıya öğenin "havaya kaldırıldığını" ve hareket hâlinde olduğunu anlatır.

DragOverlay ne oluşturacağını bilmelidir. Etkin sürükleme ID'sini durum içinde takip edin: onDragStart ile event.active.id kullanarak ayarlayın ve onDragEnd ile boş olarak temizleyin. DragOverlay içinde bu ID'yi kullanarak karşılık gelen öğe verilerini bulun ve doğru önizleme bileşenini oluşturun.

DragOverlay kullanırken özgün sürüklenebilir öğe, sürükleme sırasında görsel bir yer tutucuya dönüşmelidir. useSortable kullanıyorsanız, isDragging doğru olduğunda opaklık: 0 veya kesikli bir kenarlık uygulayın. Bu, öğe sürükleme iptal edilirse geri döneceği "alanı" ve yeni bir konuma taşınırken geride bıraktığı boşluğu gösterir.

Çok kapsayıcılı sürükle ve bırak, öğelerin iki veya daha fazla ayrı liste arasında sürüklenebilmesi anlamına gelir. Kurulum, tüm kapsayıcıları saran tek bir DndContext ve her kapsayıcının kendi SortableContext'ine sahip olmasını gerektirir. Çakışmaları önlemek için tüm kapsayıcılardaki öğe ID'leri genel olarak benzersiz olmalıdır.

Akıcı kapsayıcılar arası animasyon için durumu onDragEnd'i beklemek yerine onDragOver içinde güncelleyin. Sürüklenen öğe yeni bir kapsayıcıya geçtiğinde, onu kaynak kapsayıcıdan hemen hedef kapsayıcıya taşıyın. Bu, öğenin nereye bırakılacağı konusunda gerçek zamanlı görsel geri bildirim sağlar.

Birden çok SortableContext örneği arasında sürükleme yaparken tüm öğe ID'leri, yalnızca her listede değil, DndContext'in tamamında benzersiz olmalıdır. İki kapsayıcı aynı ID'yi paylaşırsa dnd-kit hangi öğenin etkin olduğunu belirleyemez. Genel benzersizliği sağlamak için UUID'ler kullanın veya ID'lerin önüne kapsayıcı adını ekleyin.

useDraggable ve useSortable bir data seçeneğini kabul eder: useSortable({ id, data: { containerId, type } }). Bu verilere sürükleme olaylarının geri çağırma işlevlerinde event.active.data.current olarak erişilebilir. Çok kapsayıcılı senaryolarda kaynak kapsayıcı ID'sini veri içinde saklayabilir ve öğenin nereden geldiğini bilmek için onDragOver içinde kullanabilirsiniz.

Çok kapsayıcılı durum genellikle kapsayıcı ID'sine göre anahtarlanmış ve her biri bir öğe dizisi içeren bir nesne kullanır. onDragOver içinde, etkin öğe üzerinde bulunulan hedeften farklı bir kapsayıcıdaysa öğeyi kaynak kapsayıcı dizisinden kaldırın ve doğru konumda hedef kapsayıcı dizisine ekleyin.

KeyboardSensor, çok kapsayıcılı sürükle ve bırak işlemleri için çalışır. Kullanıcılar, bir kapsayıcı içindeki öğeler arasında hareket etmek için ok tuşlarına basar; bir kapsayıcının kenarına ulaştıklarında bitişik kapsayıcılara geçmeye devam edebilirler. SortableContext collisionDetection algoritması, konuma göre en yakın geçerli bırakma hedefini belirler.

DndContext, sürüklenen öğenin hangi bırakılabilir öğenin üzerinde olduğunu nasıl hesaplayacağını belirleyen bir collisionDetection özelliğini kabul eder. Varsayılan closestCenter, çoğu liste için iyi çalışır. closestCorners, ızgaralar için daha uygundur. pointerWithin, yalnızca imleç fiziksel olarak bırakılabilir öğenin içindeyken onu etkinleştirir.

DragOverlay, document.body'ye portal olarak oluşturulur ve düzen kısıtlamalarından görsel bağımsızlık sağlar. Doğru kaplama içeriğini oluşturmak için activeDragId'yi onDragStart/onDragEnd içinde takip edin. Çok kapsayıcılı sürükle ve bırak, tek bir DndContext içindeki birden çok SortableContext örneğini ve genel olarak benzersiz ID'leri kullanır. Akıcı kapsayıcılar arası animasyonlar için durumu onDragOver içinde güncelleyin ve kaynak kapsayıcı meta verileri için event.active.data.current değerini kullanın.