DndContext, useDraggable i useDroppable

Każda funkcja przeciągania i upuszczania w dnd-kit musi być opakowana w komponent DndContext. DndContext jest centrum koordynacji — śledzi aktywne przeciąganie, zapewnia komunikację między elementami, które można przeciągać i na które można upuszczać elementy, oraz wywołuje wywołania zwrotne zdarzeń. Zwykle umieszcza się go na poziomie komponentu zarządzającego stanem przeciągania.

Hook useDraggable({ id }) sprawia, że komponent można przeciągać. Zwraca cztery kluczowe wartości: attributes (właściwości ARIA do rozpropagowania na elemencie), listeners (procedury obsługi zdarzeń rozpoczynających przeciąganie), setNodeRef (przypisuje ref przeciąganego elementu) oraz transform (bieżące przesunięcie w postaci {x, y, scaleX, scaleY}).

Aby skonfigurować element, który można przeciągać, należy rozpropagować attributes i listeners na elemencie oraz przekazać setNodeRef jako właściwość ref. Atrybuty zawierają role="button", tabIndex i właściwości aria. Listenery dołączają procedury obsługi zdarzeń wskaźnika i klawiatury, których dnd-kit potrzebuje do wykrywania rozpoczęcia przeciągania.

Wartość transform z useDraggable ma wartość null, gdy element nie jest przeciągany, a podczas przeciągania jest obiektem współrzędnych. Należy przekonwertować ją na ciąg CSS za pomocą CSS.Translate.toString(transform) z pakietu @dnd-kit/utilities. Wartość tę należy zastosować jako właściwość CSS transform przeciąganego elementu, aby wizualnie podążał za kursorem.

Hook useDroppable({ id }) oznacza kontener jako prawidłowe miejsce upuszczenia. Zwraca isOver (wartość logiczną, która przyjmuje wartość true, gdy przeciągany element znajduje się nad tym miejscem) oraz setNodeRef, służący do przypisania ref do elementu. W przeciwieństwie do useDraggable nie ma tu listenerów, które należałoby rozpropagować.

Wartość isOver z useDroppable pozwala zapewnić wizualną informację zwrotną podczas przeciągania. Gdy isOver ma wartość true, można zastosować kolor wyróżnienia, obramowanie lub zmianę tła strefy upuszczania. Pomaga to użytkownikom zrozumieć, gdzie mogą upuścić element, co ma kluczowe znaczenie dla użyteczności i dostępności.

Wywołanie zwrotne onDragEnd komponentu DndContext otrzymuje obiekt zdarzenia z dwiema ważnymi właściwościami: event.active zawiera przeciągany element (w tym jego id), a event.over zawiera miejsce upuszczenia (lub null, jeśli element upuszczono poza dowolnym miejscem upuszczania). Tych identyfikatorów należy użyć do zaktualizowania stanu aplikacji.

W onDragEnd, po sprawdzeniu, że event.over nie ma wartości null, należy zaktualizować stan tak, aby odzwierciedlał przeniesienie elementu. Jeśli na przykład karta jest przenoszona między kolumnami tablicy Kanban, należy usunąć ją z kolumny źródłowej i dodać do kolumny docelowej wskazanej przez event.over.id.

DragOverlay renderuje pływający podgląd przeciąganego elementu, który podąża za kursorem. Jest renderowany jako portal (poza zwykłym drzewem DOM), dzięki czemu nigdy nie zostanie przycięty przez kontenery z overflow:hidden. W przeciwieństwie do oryginalnego elementu nakładka może mieć cień, transformacje skalowania lub obrót sygnalizujące, że element jest przeciągany.

Aby wyrenderować właściwą zawartość w DragOverlay, należy śledzić aktualnie przeciągany element za pomocą callbacku onDragStart. Aktywny identyfikator należy przechowywać w stanie: setActiveDragId(event.active.id). W onDragEnd należy zresetować go do wartości null. Wewnątrz DragOverlay należy użyć activeDragId do wyszukania właściwego elementu i wyrenderowania go.

Rzeczywisty interfejs przeciągania i upuszczania łączy DndContext, wiele elementów useDraggable, wiele obszarów useDroppable oraz zarządzanie stanem śledzącym położenie poszczególnych elementów. Najważniejszy wniosek jest taki, że dnd-kit zapewnia mechanikę działania — do Państwa należy aktualizowanie stanu w onDragEnd oraz ponowne renderowanie interfejsu tak, aby odzwierciedlał nowy układ.

Które narzędzie konwertuje obiekt transform z useDraggable na ciąg znaków transformacji CSS?

DndContext jest centrum koordynacji wszystkich operacji przeciągania w dnd-kit. useDraggable udostępnia atrybuty, listenery, setNodeRef i transform dla elementów, które można przeciągać. useDroppable udostępnia isOver i setNodeRef dla celów upuszczania. onDragEnd zapewnia event.active.id oraz event.over?.id, których należy użyć do aktualizacji stanu. DragOverlay renderuje pływający podgląd oparty na portalu.