Własne nakładki przeciągania i DnD w wielu kontenerach

DragOverlay renderuje zawartość jako portal React, dołączając ją bezpośrednio do document.body zamiast umieszczać ją wewnątrz drzewa DOM DndContext. Oznacza to, że zawartość nigdy nie zostanie przycięta przez kontenery z overflow:hidden lub overflow:scroll i zawsze pojawi się nad wszystkimi innymi elementami bez konieczności ręcznego zarządzania z-index.

Ponieważ DragOverlay jest oddzielony od oryginalnego elementu, można nadać mu style wizualne, które zaburzyłyby układ po zastosowaniu do oryginału. Można dodać cień, transformację skalowania (sprawić, aby był nieco większy od oryginału) lub efekt obrotu. Te wskazówki wizualne informują użytkownika, że element został „uniesiony” i jest w ruchu.

DragOverlay musi wiedzieć, co ma wyrenderować. Należy śledzić aktywny identyfikator przeciągania w stanie: ustawić go w onDragStart za pomocą event.active.id i wyczyścić w onDragEnd, przypisując wartość null. Wewnątrz DragOverlay należy użyć tego identyfikatora, aby znaleźć dane odpowiadającego elementu i wyrenderować właściwy komponent podglądu.

Podczas korzystania z DragOverlay oryginalny element, który można przeciągać, powinien stać się wizualnym elementem zastępczym. W przypadku użycia useSortable należy zastosować opacity: 0 lub przerywaną ramkę, gdy isDragging ma wartość true. Pokazuje to „miejsce”, do którego element wróci po anulowaniu przeciągania, oraz lukę pozostawioną po przeniesieniu go w nowe miejsce.

Przeciąganie i upuszczanie między kontenerami oznacza, że elementy można przenosić między co najmniej dwiema oddzielnymi listami. Konfiguracja wymaga jednego elementu DndContext opakowującego wszystkie kontenery, z których każdy ma własny SortableContext. Wszystkie identyfikatory elementów we wszystkich kontenerach muszą być unikalne globalnie, aby zapobiec kolizjom.

Aby zapewnić płynną animację przenoszenia między kontenerami, należy aktualizować stan w onDragOver, zamiast czekać na onDragEnd. Gdy przeciągany element przechodzi do nowego kontenera, należy natychmiast przenieść go z kontenera źródłowego do docelowego. Zapewnia to informacje zwrotne w czasie rzeczywistym o miejscu, w którym element zostanie upuszczony.

Podczas przeciągania między wieloma instancjami SortableContext wszystkie identyfikatory elementów muszą być unikalne w obrębie całego DndContext, a nie tylko w poszczególnych listach. Jeśli dwa kontenery mają ten sam identyfikator, dnd-kit nie może określić, który element jest aktywny. Aby zapewnić globalną unikalność, należy użyć identyfikatorów UUID albo poprzedzić identyfikatory nazwą kontenera.

useDraggable i useSortable przyjmują opcję data: useSortable({ id, data: { containerId, type } }). Dane te są dostępne w callbackach zdarzeń przeciągania jako event.active.data.current. W scenariuszach obejmujących wiele kontenerów można przechowywać identyfikator kontenera źródłowego w data i używać go w onDragOver, aby określić, skąd pochodzi element.

Stan obejmujący wiele kontenerów zazwyczaj korzysta z obiektu indeksowanego identyfikatorami kontenerów, z których każdy zawiera tablicę elementów. W onDragOver, gdy aktywny element znajduje się w innym kontenerze niż cel wskazany przez over, należy usunąć go z tablicy kontenera źródłowego i wstawić do tablicy kontenera docelowego na właściwej pozycji.

KeyboardSensor działa również w przypadku DnD obejmującego wiele kontenerów. Użytkownicy naciskają klawisze strzałek, aby przenosić się między elementami w obrębie kontenera, a po dotarciu do jego krawędzi mogą kontynuować przechodzenie do sąsiednich kontenerów. Algorytm collisionDetection komponentu SortableContext określa najbliższy prawidłowy cel upuszczenia na podstawie położenia.

DndContext przyjmuje prop collisionDetection, który określa sposób obliczania, nad którym elementem do upuszczania znajduje się przeciągany element. Domyślna strategia closestCenter sprawdza się dobrze w przypadku większości list. closestCorners lepiej nadaje się do siatek. pointerWithin aktywuje element do upuszczania tylko wtedy, gdy kursor fizycznie znajduje się w jego obrębie.

Gdzie DragOverlay renderuje swoją zawartość w DOM?

DragOverlay jest renderowany jako portal do document.body, dzięki czemu pozostaje niezależny wizualnie od ograniczeń układu. Należy śledzić activeDragId w onDragStart/onDragEnd, aby wyrenderować właściwą zawartość nakładki. DnD obejmujące wiele kontenerów korzysta z wielu instancji SortableContext umieszczonych w jednym DndContext i globalnie unikalnych identyfikatorów. Aby zapewnić płynne animacje przenoszenia między kontenerami, należy aktualizować stan w onDragOver, korzystając z event.active.data.current jako metadanych kontenera źródłowego.