Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Jeste li ikada željeli dodati funkciju povuci i ispusti svojim React komponentama? Nije tako teško kao što možda mislite.

Povuci i ispusti je način pomicanja ili manipuliranja elementima na zaslonu pomoću miša ili dodirne podloge. Savršeno je za promjenu redoslijeda popisa stavki ili premještanje stavki s jednog popisa na drugi.

Možete izgraditi povuci i ispusti komponente u Reactu koristeći jednu od dvije metode: ugrađene značajke ili modul treće strane.

Različiti načini za implementaciju povlačenja i ispuštanja u Reactu

Postoje dva načina za implementaciju povlačenja i ispuštanja u Reactu: korištenjem ugrađenih značajki Reacta ili korištenjem modula treće strane. Počni od stvaranje React aplikacije, zatim odaberite željenu metodu.

Metoda 1: Korištenje ugrađenih značajki

U Reactu možete koristiti događaj onDrag za praćenje kada korisnik povlači element i događaj onDrop za praćenje kada ga ispušta. Također možete koristiti onDragStart i onDragEnd događaje za praćenje kada povlačenje počinje i prestaje.

instagram viewer

Da bi se element mogao povlačiti, možete postaviti atribut draggable na true. Na primjer:

uvoz Reagiraj, {Component} iz 'reagirati';
razredaMoja komponentaproteže sekomponenta{
 render() {
povratak (
<div
 povlačeći se
 onDragStart={ovaj.handleDragStart}
 onDrag={ovaj.handleDrag}
 onDragEnd={ovaj.handleDragEnd}
>
 vuci me!
</div>
 );
 }
}
izvozzadano MyComponent;

Da bi se element mogao ispustiti, možete stvoriti metode handleDragStart, handleDrag i handleDragEnd. Ove metode će se pokrenuti kada korisnik povuče element i kada ga ispusti. Na primjer:

uvoz Reagiraj, {Component} iz 'reagirati';
razredaMoja komponentaproteže sekomponenta{
 handleDragStart (događaj) {
// Ova metoda se pokreće kada započne povlačenje
 console.log("Započelo")
 }


handleDrag (događaj) {
// Ova metoda se pokreće kada se komponenta povlači
 console.log("Povlačenje...")
 }


handleDragEnd (događaj) {
// Ova metoda se pokreće kada povlačenje prestane
 console.log("Završeno")
 }


render() {
povratak (
<div
 povlačeći se
 onDragStart={ovaj.handleDragStart}
 onDrag={ovaj.handleDrag}
 onDragEnd={ovaj.handleDragEnd}
>
 vuci me!
</div>
 );
 }
}
izvozzadano MyComponent;

U gornjem kodu postoje tri metode za rukovanje povlačenjem elementa: handleDragStart, handleDrag i handleDragEnd. Div ima atribut koji se može povlačiti i postavlja svojstva onDragStart, onDrag i onDragEnd na njihove odgovarajuće funkcije.

Kada povučete element, prva će se pokrenuti metoda handleDragStart. Ovo je mjesto gdje možete napraviti sve postavke koje trebate, kao što je postavljanje podataka za prijenos.

Zatim se metoda handleDrag ponavlja dok povlačite element. Ovdje možete izvršiti bilo kakva ažuriranja poput podešavanja položaja elementa.

Konačno, kada ispustite element, pokreće se metoda handleDragEnd. Ovdje možete izvršiti bilo koje čišćenje koje trebate, kao što je resetiranje podataka koje ste prenijeli.

Također možete pomicati komponentu po ekranu u onDragEnd(). Da biste to učinili, morat ćete postaviti svojstvo stila komponente. Na primjer:

uvoz Reagiraj, {Component, useState} iz 'reagirati';
funkcijaMoja komponenta() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (događaj) => {
postavitiX(događaj.clientX);
setY(događaj.clientY);
 };


povratak (
<div
 povlačeći se
 onDragEnd={handleDragEnd}
 stil={{
 položaj: "apsolutni",
 lijevo: x,
 vrh: y
 }}
>
 vuci me!
</div>
 );
}
izvozzadano MyComponent;

Kod poziva useState kuku za praćenje x i y položaja komponente. Zatim, u metodi handleDragEnd, ažurira položaj x i y. Konačno, možete postaviti svojstvo stila komponente da je postavite na nove x i y pozicije.

Metoda 2: Korištenje modula treće strane

Ako ne želite koristiti ugrađene značajke Reacta, možete koristiti modul treće strane kao što je reagirati-povuci-ispusti. Ovaj modul pruža omotač specifičan za React oko HTML5 API-ja za povlačenje i ispuštanje.

Da biste koristili ovaj modul, prvo ga trebate instalirati koristeći npm:

npm instalirati reakcija-povuci-i-pad--uštedjeti

Zatim ga možete koristiti u svojim React komponentama:

uvoz Reagiraj, {Component} iz 'reagirati';
uvoz { Povlačenje, ispuštanje } iz 'reagiraj-povuci i ispusti';
razredaMoja komponentaproteže sekomponenta{
 render() {
povratak (
<div>
<Vrsta koja se može povlačiti="fuj" podaci="bar">
<div>vuci me!</div>
</Draggable>


<Vrste koje se mogu ispustiti={['fuj']} onDrop={this.handleDrop}>
<div>Baci ovdje!</div>
</Droppable>
</div>
 );
 }


handleDrop (podaci, događaj) {
// Ova metoda se pokreće kada podaci padnu
konzola.log (podaci); // 'bar'
 }
}
izvozzadano MyComponent;

Započnite s uvozom komponenti koje se mogu povući i ispustiti iz modula za povlačenje i ispuštanje reakcije. Zatim upotrijebite te komponente za stvaranje elementa koji se može povući i elementa koji se može ispustiti.

Komponenta koja se može povlačiti prihvaća vrstu prop, koja specificira vrstu podataka koju komponenta predstavlja, i data prop koja specificira podatke za prijenos. Imajte na umu da je vrsta prilagođeno ime koje možete odabrati kako biste pratili koja je koja komponenta u višekomponentnom sučelju.

Droppable komponenta koristi tipove prop za određivanje vrsta podataka koje možete ispustiti na nju. Također ima onDrop prop, koji specificira funkciju povratnog poziva koja će se pokrenuti kada ispustite komponentu na nju.

Kada ispustite komponentu koja se može povući na onu koja se može ispustiti, pokrenut će se metoda handleDrop. Ovdje možete izvršiti bilo kakvu obradu koju trebate učiniti s podacima.

Savjeti za izradu DnD komponenti prilagođenih korisniku

Postoji nekoliko stvari koje možete učiniti kako biste svoje komponente za povlačenje i ispuštanje učinili jednostavnijima za korištenje.

Prvo, trebali biste pružiti vizualnu povratnu informaciju kada se element povlači. Na primjer, možete promijeniti neprozirnost elementa ili dodati obrub. Za dodavanje vizualnih efekata možete koristiti uobičajeni CSS ili tailwind CSS u vašoj React aplikaciji.

Drugo, trebali biste se uvjeriti da vaši korisnici mogu povući element samo do važećeg cilja ispuštanja. Na primjer, možete dodati vrste elementu, koji specificira tipove komponenti koje će prihvatiti.

Treće, trebali biste omogućiti korisniku način da otkaže operaciju povlačenja i ispuštanja. Na primjer, možete dodati gumb koji korisniku omogućuje otkazivanje operacije.

Poboljšajte korisničko iskustvo s povlačenjem i ispuštanjem

Značajka povuci i ispusti ne samo da pomaže u poboljšanju korisničkog iskustva, već također može pomoći u ukupnoj izvedbi vaše web aplikacije. Korisnik sada može jednostavno promijeniti redoslijed nekih podataka bez potrebe za osvježavanjem stranice ili prolaskom kroz više koraka.

Također možete dodati druge animacije u svoju React aplikaciju kako biste značajku povuci i ispusti učinili interaktivnijom i lakšom za korištenje.