Drag and drop w React: sortowalna lista i tablica Kanban
Przewodnik po drag and drop w React
Drag and drop w React: sortowalna lista i Kanban (dnd-kit) | We.Inc
Zbuduj w React sortowalną listę i tablicę Kanban z dnd-kit albo z natywnymi zdarzeniami przeciągania HTML. Działająca tablica na stronie, przenoszenie klawiaturą i kod do skopiowania.
W większości aplikacji React dnd-kit to najprostszy solidny wybór: zestaw narzędzi na licencji MIT z wbudowanymi sensorami wskaźnika, dotyku i klawiatury. Zainstaluj @dnd-kit/react, otocz obszar komponentem DragDropProvider, nadaj każdej karcie useSortable z id, index i group, a potem aktualizuj stan w onDragEnd. Natywne zdarzenia przeciągania HTML też działają, ale wymagają więcej ręcznie pisanego kodu.
Dwa sposoby na dodanie drag and drop
dnd-kit (@dnd-kit/react)
Natywne drag and drop w HTML
Instalacja
npm install @dnd-kit/react
Nic, wbudowane w przeglądarki
Klawiatura
Sensor klawiatury w zestawie
Sterowanie klawiszami budujesz sam
Dotyk
Sensory dotyku i wskaźnika w zestawie
Zależy od przeglądarki; testuj na telefonach
Sortowalne listy
useSortable z @dnd-kit/react/sortable
Własne obliczenia indeksów w handlerach upuszczenia
Najlepsze do
Tablic Kanban, sortowalnych list, siatek
Upuszczania plików lub prostych, jednorazowych upuszczeń
Poniżej jest działająca tablica, na której możesz od razu przeciągać karty, z przyciskami strzałek dla osób, które nie używają myszy. Pod nią znajdziesz kod dnd-kit dla tej samej sortowalnej listy i tablicy z wieloma kolumnami, a także wersję na zwykłych zdarzeniach przeglądarki do porównania.
Przeciągnij kartę w obrębie kolumny, aby zmienić jej kolejność, albo do innej kolumny, aby ją przenieść.
Bez myszy? Przejdź klawiszem Tab do karty i użyj jej przycisków przenoszenia, aby zmienić pozycję lub kolumnę.
Najpierw skopiuj sortowalną listę z dnd-kit, a potem wersję Kanban, która dodaje grupę dla każdej kolumny.
Trzymaj dane tablicy jako zwykły stan z kluczami według kolumn i pozwól, by onDragEnd tworzył jego kolejną kopię.
Nadaj każdemu przeciąganemu elementowi stabilne id z Twoich danych. Indeksy tablicy jako id psują się, gdy tylko elementy się przesuną.
Wyjdź wcześniej, gdy event.canceled ma wartość true, aby naciśnięcie Escape w trakcie przeciągania zostawiło tablicę nietkniętą.
Po upuszczeniu zapisz nową kolejność w backendzie i wycofaj zmianę, jeśli żądanie się nie powiedzie.
Zostaw widoczną lukę lub obrys w miejscu, gdzie karta wyląduje; ludzie muszą zobaczyć cel, zanim puszczą.
Puste kolumny też potrzebują strefy upuszczania o pewnej wysokości, inaczej nigdy nie da się do nich nic upuścić.
Najczęściej zadawane pytania
Czy react-beautiful-dnd to nadal dobry wybór?
Atlassian zarchiwizował repozytorium react-beautiful-dnd i poleca jego następcę, Pragmatic drag and drop. W nowych projektach React aktywnie rozwijanymi opcjami do porównania są dnd-kit oraz Pragmatic drag and drop.
Czym różni się @dnd-kit/core od @dnd-kit/react?
@dnd-kit/core z @dnd-kit/sortable to od dawna istniejąca para pakietów dla React. @dnd-kit/react to nowszy adapter zbudowany na rdzeniu niezależnym od frameworka, który napędza też adaptery dla Vue, Svelte i Solid. Nowy kod może zacząć od @dnd-kit/react, tak jak robi to aktualna dokumentacja.
Dlaczego zdarzenie drop nigdy się nie wywołuje w API HTML?
Cel upuszczenia musi wywołać event.preventDefault() w swoim handlerze dragover. Bez tego wywołania przeglądarka traktuje element jako nieprawidłowy cel i zdarzenie drop nigdy nie zostaje wysłane.
Jak sprawić, by drag and drop był dostępny?
Spraw, by każda karta mogła otrzymać fokus, zapewnij sposób na podniesienie, przeniesienie i upuszczenie jej klawiaturą oraz ogłaszaj wynik w regionie live. dnd-kit ma od razu sensor klawiatury i obsługę dostępności; z natywnym API dodajesz to wszystko sam.
Najpierw stan, potem przeciąganie
Tablica to obiekt z tablicami: jedna tablica id kart na kolumnę. Przeciąganie decyduje tylko o tym, która karta się przesunęła, skąd przyszła i gdzie wylądowała. Każda biblioteka podaje Ci te cztery fakty, a Twój kod zamienia je w nowy obiekt.
Napisz tę funkcję przenoszenia jako czysty helper i testuj ją bez przeglądarki. dnd-kit nawet go dostarcza: move z @dnd-kit/helpers, który przyjmuje Twoje elementy i zdarzenie przeciągania, a zwraca zaktualizowaną kopię.
Dlaczego natywne API jest trudniejsze, niż wygląda
Przeglądarka wywołuje siedem zdarzeń (dragstart, drag, dragenter, dragleave, dragover, drop i dragend) i musisz anulować dragover na każdym prawidłowym celu. Dane przechodzą przez event.dataTransfer jako ciągi znaków i możesz je odczytać tylko w handlerze drop.
Nie ma ścieżki dla klawiatury ani wbudowanego sposobu na animowane odsuwanie pozostałych kart. To wystarcza przy upuszczaniu pliku na obszar wgrywania, ale sortowalna tablica szybko rozrasta się we własną małą bibliotekę.
Sortowalna lista z dnd-kit
Zainstaluj przez npm install @dnd-kit/react. Każdy element zna swój indeks; po upuszczeniu source.initialIndex i source.index mówią, dokąd się przesunął.
SortableList.jsx
Zmienia kolejność tablicy nazw zadań. Kopiowanie, a potem splice zostawia stary stan nietknięty.
Tablica Kanban z dnd-kit
Dodaj group do useSortable, aby karty mogły wędrować między kolumnami. source.initialGroup i source.group to stara i nowa nazwa kolumny.
KanbanBoard.jsx
Trzy kolumny przechowywane w jednym obiekcie. Przeniesienie w obrębie kolumny zmienia jej kolejność; przeniesienie między kolumnami usuwa kartę z jednej tablicy i wstawia ją do drugiej.
Ten sam pomysł na natywnych zdarzeniach przeciągania HTML
Żaden pakiet nie jest potrzebny. Zwróć uwagę na preventDefault w onDragOver: bez niego drop nigdy się nie wywoła.
NativeColumns.jsx
Przenosi kartę na koniec kolumny, na którą została upuszczona. Zmiana kolejności w obrębie kolumny wymagałaby dodatkowej logiki indeksów.
Zdarzenia przeciągania HTML: ściąga
Siedem zdarzeń przeciągania i gdzie się wywołują
Zdarzenie
Wywoływane na
Kiedy
Przeciąganym elemencie
Przeciąganie się zaczyna; tu ustaw dataTransfer
Przeciąganym elemencie
Wielokrotnie w trakcie przeciągania
Potencjalnym celu
Przeciągany element na niego wchodzi
Potencjalnym celu
Wielokrotnie, gdy element jest nad nim; wywołaj preventDefault, aby pozwolić na upuszczenie
Potencjalnym celu
Przeciągany element go opuszcza
Celu
Element zostaje puszczony na prawidłowym celu; tu odczytaj dataTransfer
Przeciąganym elemencie
Przeciąganie się kończy, upuszczeniem lub anulowaniem
Do zrobienia
W toku
Gotowe
Logo
Tabela cen
Formularz kontaktowy
Sekcja hero
Domena
{card} przeniesiono do: {column}, pozycja {n}
Wypróbuj: działająca tablica Kanban
Przeciągaj karty między kolumnami Do zrobienia, W toku i Gotowe albo użyj przycisków przenoszenia na każdej karcie.