Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.

Czy kiedykolwiek chciałeś dodać funkcję przeciągnij i upuść do swoich komponentów React? To nie jest takie trudne, jak mogłoby się wydawać.

Przeciąganie i upuszczanie to sposób przenoszenia lub manipulowania elementami na ekranie za pomocą myszy lub touchpada. Jest idealny do zmiany kolejności elementów na liście lub przenoszenia elementów z jednej listy do drugiej.

Możesz budować komponenty metodą „przeciągnij i upuść” w React przy użyciu jednej z dwóch metod: wbudowanych funkcji lub modułu innej firmy.

Różne sposoby implementacji przeciągania i upuszczania w React

Istnieją dwa sposoby implementacji przeciągania i upuszczania w React: przy użyciu wbudowanych funkcji React lub przy użyciu modułu innej firmy. Zacząć od tworzenie aplikacji React, a następnie wybierz preferowaną metodę.

Metoda 1: Korzystanie z wbudowanych funkcji

W React możesz użyć zdarzenia onDrag do śledzenia, kiedy użytkownik przeciąga element, oraz zdarzenia onDrop do śledzenia, kiedy go upuści. Możesz także użyć zdarzeń onDragStart i onDragEnd do śledzenia rozpoczęcia i zakończenia przeciągania.

instagram viewer

Aby umożliwić przeciąganie elementu, możesz ustawić atrybut draggable na wartość true. Na przykład:

import Reaguj, { Komponent } z 'reagować';
klasaMój komponentrozciąga sięCzęść{
 renderowanie() {
powrót (
<dz
 przeciągany
 onDragStart={Ten.handleDragStart}
 onDrag={Ten.handleDrag}
 onDragEnd={Ten.handleDragEnd}
>
 Pociągnij mnie!
</div>
 );
 }
}
eksportdomyślny Mój składnik;

Aby umożliwić upuszczanie elementu, można utworzyć metody handleDragStart, handleDrag i handleDragEnd. Metody te będą uruchamiane, gdy użytkownik przeciągnie element i upuści go. Na przykład:

import Reaguj, { Komponent } z 'reagować';
klasaMój komponentrozciąga sięCzęść{
 handleDragStart (zdarzenie) {
// Ta metoda jest uruchamiana po rozpoczęciu przeciągania
 log konsoli ("Rozpoczęty")
 }


handleDrag (zdarzenie) {
// Ta metoda jest uruchamiana podczas przeciągania komponentu
 log konsoli ("Włóka...")
 }


handleDragEnd (zdarzenie) {
// Ta metoda jest uruchamiana po zatrzymaniu przeciągania
 log konsoli ("Zakończone")
 }


renderowanie() {
powrót (
<dz
 przeciągany
 onDragStart={Ten.handleDragStart}
 onDrag={Ten.handleDrag}
 onDragEnd={Ten.handleDragEnd}
>
 Pociągnij mnie!
</div>
 );
 }
}
eksportdomyślny Mój składnik;

W powyższym kodzie istnieją trzy metody obsługi przeciągania elementu: handleDragStart, handleDrag i handleDragEnd. Element div ma atrybut draggable i ustawia właściwości onDragStart, onDrag i onDragEnd na odpowiadające im funkcje.

Podczas przeciągania elementu najpierw zostanie uruchomiona metoda handleDragStart. W tym miejscu możesz wykonać dowolną konfigurację, taką jak ustawienie danych do przesłania.

Następnie metoda handleDrag jest wielokrotnie uruchamiana podczas przeciągania elementu. Tutaj możesz dokonać wszelkich aktualizacji, takich jak dostosowanie pozycji elementu.

Wreszcie, po upuszczeniu elementu uruchamiana jest metoda handleDragEnd. Tutaj możesz wykonać wszelkie niezbędne czynności porządkowe, takie jak zresetowanie przesłanych danych.

Możesz także przesuwać komponent po ekranie w onDragEnd(). Aby to zrobić, musisz ustawić właściwość stylu komponentu. Na przykład:

import Zareaguj, { Komponent, stan użycia} z 'reagować';
funkcjonowaćMój komponent() {
konst [x, zestawX] = użyjStan(0);
konst [y, zestawY] = użyjStan(0);


konst handleDragEnd = (zdarzenie) => {
zestawX(wydarzenie.klientX);
zestaw Y(wydarzenie.klientY);
 };


powrót (
<dz
 przeciągany
 onDragEnd={handleDragEnd}
 styl={{
 pozycja: "absolutny",
 lewy: x,
 góra: j
 }}
>
 Pociągnij mnie!
</div>
 );
}
eksportdomyślny Mój składnik;

Kod wywołuje hak useState w celu śledzenia pozycji x i y komponentu. Następnie w metodzie handleDragEnd aktualizuje pozycję x i y. Na koniec możesz ustawić właściwość stylu komponentu, aby ustawić go w nowych pozycjach x i y.

Metoda 2: Korzystanie z modułu innej firmy

Jeśli nie chcesz korzystać z wbudowanych funkcji React, możesz użyć modułu innej firmy, takiego jak Reaguj metodą „przeciągnij i upuść”.. Ten moduł zapewnia specyficzne dla React opakowanie wokół API HTML5 typu „przeciągnij i upuść”.

Aby korzystać z tego modułu, najpierw musisz go zainstalować za pomocą npm:

np zainstalować reaguj-przeciągnij-I-upuszczać--ratować

Następnie możesz użyć go w swoich komponentach React:

import Reaguj, { Komponent } z 'reagować';
import { Możliwość przeciągania, upuszczania } z „reakcja-przeciągnij i upuść”;
klasaMój komponentrozciąga sięCzęść{
 renderowanie() {
powrót (
<dz>
<Przeciągany typ ="bla" dane="bar">
<dz>Pociągnij mnie!</div>
</Draggable>


<Typy do upuszczenia={['bla']} onDrop={this.handleDrop}>
<dz>Upuść tutaj!</div>
</Droppable>
</div>
 );
 }


handleDrop (dane, zdarzenie) {
// Ta metoda jest uruchamiana, gdy spadają dane
konsola.log (dane); // 'bar'
 }
}
eksportdomyślny Mój składnik;

Zacznij od zaimportowania komponentów Draggable i Droppable z modułu React-Drag-and-Drop. Następnie użyj tych komponentów, aby utworzyć element przeciągany i element, który można upuścić.

Komponent Draggable akceptuje właściwość typu, która określa typ danych reprezentowanych przez komponent, oraz właściwość danych, która określa dane do przesłania. Zwróć uwagę, że typ to niestandardowa nazwa, którą możesz wybrać, aby śledzić, który komponent jest którym w interfejsie wieloskładnikowym.

Komponent Droppable używa atrybutu types do określenia typów danych, które można na niego upuścić. Ma również właściwość onDrop, która określa funkcję wywołania zwrotnego, która zostanie uruchomiona po upuszczeniu na nią komponentu.

Kiedy upuścisz przeciągany komponent na droppable, uruchomi się metoda handleDrop. Tutaj możesz wykonać dowolne przetwarzanie, które musisz wykonać z danymi.

Wskazówki dotyczące tworzenia przyjaznych dla użytkownika komponentów DnD

Jest kilka rzeczy, które możesz zrobić, aby komponenty przeciągania i upuszczania były bardziej przyjazne dla użytkownika.

Po pierwsze, powinieneś zapewnić wizualną informację zwrotną, gdy element jest przeciągany. Możesz na przykład zmienić krycie elementu lub dodać obramowanie. Aby dodać efekty wizualne, możesz użyć zwykłego CSS lub Tailwind CSS w Twojej aplikacji React.

Po drugie, należy upewnić się, że użytkownicy mogą przeciągać element tylko do prawidłowego celu upuszczania. Na przykład możesz dodać typy atrybut do elementu, który określa typy komponentów, które będzie akceptował.

Po trzecie, należy zapewnić użytkownikowi możliwość anulowania operacji przeciągania i upuszczania. Na przykład możesz dodać przycisk, który umożliwia użytkownikowi anulowanie operacji.

Popraw wrażenia użytkownika dzięki przeciąganiu i upuszczaniu

Funkcja przeciągania i upuszczania nie tylko pomaga poprawić wrażenia użytkownika, ale może również pomóc w ogólnej wydajności aplikacji internetowej. Użytkownik może teraz łatwo zmienić kolejność niektórych danych bez konieczności odświeżania strony lub wykonywania wielu kroków.

Możesz także dodać inne animacje w aplikacji React, aby funkcja przeciągania i upuszczania była bardziej interaktywna i przyjazna dla użytkownika.