Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Ți-ai dorit vreodată să adaugi funcționalitate drag-and-drop la componentele tale React? Nu este atât de dificil pe cât ai putea crede.

Drag and drop este o modalitate de a muta sau manipula elemente de pe un ecran folosind un mouse sau touchpad. Este perfect pentru reordonarea unei liste de articole sau pentru mutarea articolelor dintr-o listă în alta.

Puteți construi componente drag-and-drop în React folosind oricare dintre două metode: caracteristici încorporate sau un modul terță parte.

Diferite moduri de a implementa Drag and Drop in React

Există două moduri de a implementa drag and drop în React: folosind funcțiile încorporate ale React sau folosind un modul terță parte. Începe prin crearea unei aplicații React, apoi alegeți metoda preferată.

Metoda 1: Utilizarea caracteristicilor încorporate

În React, puteți utiliza evenimentul onDrag pentru a urmări când utilizatorul trage un element și evenimentul onDrop pentru a urmări când îl plasează. De asemenea, puteți utiliza evenimentele onDragStart și onDragEnd pentru a urmări când începe și se oprește glisarea.

Pentru a face un element trasabil, puteți seta atributul draggable la true. De exemplu:

import Reacționează, { Component } din 'reacţiona';
clasăMyComponentse extindeComponentă{
 randa() {
întoarcere (
<div
 trasabil
 onDragStart={acest.handleDragStart}
 onDrag={acest.handleDrag}
 onDragEnd={acest.handleDragEnd}
>
 Trage-ma!
</div>
 );
 }
}
exportMod implicit MyComponent;

Pentru a face droppable un element, puteți crea metodele handleDragStart, handleDrag și handleDragEnd. Aceste metode vor rula atunci când un utilizator trage elementul și când îl plasează. De exemplu:

import Reacționează, { Component } din 'reacţiona';
clasăMyComponentse extindeComponentă{
 handleDragStart (eveniment) {
// Această metodă rulează când începe glisarea
 console.log("A început")
 }


handleDrag (eveniment) {
// Această metodă rulează când componenta este trasă
 console.log("Se trag...")
 }


handleDragEnd (eveniment) {
// Această metodă rulează când tragerea se oprește
 console.log("Încheiat")
 }


randa() {
întoarcere (
<div
 trasabil
 onDragStart={acest.handleDragStart}
 onDrag={acest.handleDrag}
 onDragEnd={acest.handleDragEnd}
>
 Trage-ma!
</div>
 );
 }
}
exportMod implicit MyComponent;

În codul de mai sus, există trei metode pentru a gestiona tragerea unui element: handleDragStart, handleDrag și handleDragEnd. Div-ul are un atribut draggable și setează proprietățile onDragStart, onDrag și onDragEnd la funcțiile corespunzătoare.

Când glisați elementul, metoda handleDragStart va rula prima. Aici puteți face orice configurare pe care trebuie să o faceți, cum ar fi setarea datelor pentru transfer.

Apoi, metoda handleDrag rulează în mod repetat în timp ce glisați elementul. Aici puteți face orice actualizări, cum ar fi ajustarea poziției elementului.

În cele din urmă, când aruncați elementul, rulează metoda handleDragEnd. Aici puteți face orice curățare pe care trebuie să o faceți, cum ar fi resetarea datelor pe care le-ați transferat.

De asemenea, puteți muta componenta în jurul ecranului în onDragEnd(). Pentru a face acest lucru, va trebui să setați proprietatea de stil a componentei. De exemplu:

import React, { Component, useState } din 'reacţiona';
funcţieMyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);


const handleDragEnd = (eveniment) => {
setX(eveniment.clientX);
setY(eveniment.clientY);
 };


întoarcere (
<div
 trasabil
 onDragEnd={handleDragEnd}
 stil={{
 poziţie: "absolut",
 stânga: x,
 sus: y
 }}
>
 Trage-ma!
</div>
 );
}
exportMod implicit MyComponent;

Codul apelează cârligul useState pentru a urmări poziția x și y a componentei. Apoi, în metoda handleDragEnd, actualizează pozițiile x și y. În cele din urmă, puteți seta proprietatea de stil a componentei pentru a o poziționa la noile poziții x și y.

Metoda 2: Utilizarea unui modul terță parte

Dacă nu doriți să utilizați funcțiile încorporate ale React, puteți utiliza un modul terță parte, cum ar fi reacționează-trag-and-drop. Acest modul oferă un wrapper specific React în jurul API-ului HTML5 drag-and-drop.

Pentru a utiliza acest modul, mai întâi trebuie să îl instalați folosind npm:

npm instalare reacționează-trage-și-cădere brusca--Salvați

Apoi, îl puteți utiliza în componentele dvs. React:

import Reacționează, { Component } din 'reacţiona';
import { Draggable, Droppable } din „reacționează-trag-and-drop”;
clasăMyComponentse extindeComponentă{
 randa() {
întoarcere (
<div>
<Tip dragable="foo" date="bar">
<div>Trage-ma!</div>
</Draggable>


<Tipuri droppable={['foo']} onDrop={this.handleDrop}>
<div>Aruncă aici!</div>
</Droppable>
</div>
 );
 }


handleDrop (date, eveniment) {
// Această metodă rulează când datele scade
consolă.log (date); // 'bar'
 }
}
exportMod implicit MyComponent;

Începeți prin a importa componentele Draggable și Droppable din modulul react-drag-and-drop. Apoi, utilizați aceste componente pentru a crea un element draggable și un element droppable.

Componenta Draggable acceptă un tip de prop, care specifică tipul de date pe care îl reprezintă componenta și o data prop care specifică datele de transferat. Rețineți că tipul este un nume personalizat pe care îl puteți alege pentru a urmări ce componentă este care într-o interfață cu mai multe componente.

Componenta Droppable folosește un tip de prop pentru a specifica tipurile de date pe care le puteți arunca pe ea. De asemenea, are o prop onDrop, care specifică funcția de apel invers care va rula atunci când plasați o componentă pe ea.

Când plasați componenta draggable pe droppable, se va rula metoda handleDrop. Aici puteți face orice procesare pe care trebuie să o faceți cu datele.

Sfaturi pentru construirea de componente DnD ușor de utilizat

Există câteva lucruri pe care le puteți face pentru a face componentele drag-and-drop mai ușor de utilizat.

În primul rând, ar trebui să oferiți feedback vizual atunci când un element este tras. De exemplu, puteți modifica opacitatea elementului sau puteți adăuga un chenar. Pentru a adăuga efecte vizuale puteți folosi CSS normal sau tailwind CSS în aplicația dvs. React.

În al doilea rând, ar trebui să vă asigurați că utilizatorii dvs. pot trage elementul doar către o țintă de drop validă. De exemplu, puteți adăuga tipuri atribut elementului, care specifică tipurile de componente pe care le va accepta.

În al treilea rând, ar trebui să oferiți utilizatorului o modalitate de a anula operația de glisare și plasare. De exemplu, puteți adăuga un buton care permite utilizatorului să anuleze operația.

Îmbunătățiți experiența utilizatorului prin glisare și plasare

Funcția de glisare și plasare nu numai că ajută la îmbunătățirea experienței utilizatorului, dar poate ajuta și la performanța generală a aplicației dvs. web. Un utilizator poate acum rearanja cu ușurință ordinea unor date fără a fi nevoit să reîmprospăteze pagina sau să parcurgă mai mulți pași.

De asemenea, puteți adăuga alte animații în aplicația React pentru a face funcția de glisare și plasare mai interactivă și mai ușor de utilizat.