Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

Ste že kdaj želeli svojim React komponentam dodati funkcijo povleci in spusti? Ni tako težko, kot si mislite.

Povleci in spusti je način premikanja ali upravljanja elementov na zaslonu z uporabo miške ali sledilne ploščice. Popoln je za preurejanje seznama elementov ali premikanje elementov z enega seznama na drugega.

V Reactu lahko sestavite komponente povleci in spusti z uporabo enega od dveh načinov: vgrajenih funkcij ali modula tretje osebe.

Različni načini implementacije povleci in spusti v React

Obstajata dva načina za implementacijo povleci in spusti v React: z uporabo vgrajenih funkcij Reacta ali z uporabo modula tretje osebe. Začni z ustvarjanje aplikacije React, nato izberite želeno metodo.

1. način: Uporaba vgrajenih funkcij

V Reactu lahko uporabite dogodek onDrag za sledenje, kdaj uporabnik vleče element, in dogodek onDrop za sledenje, ko ga spusti. Uporabite lahko tudi dogodka onDragStart in onDragEnd, da spremljate, kdaj se vlečenje začne in konča.

instagram viewer

Če želite omogočiti vlečenje elementa, lahko atribut draggable nastavite na true. Na primer:

uvoz Reagiraj, {Component} od 'reagirati';
razredMyComponentse raztezaKomponenta{
 render() {
vrnitev (
<div
 vlečenje
 onDragStart={to.handleDragStart}
 onDrag={to.handleDrag}
 onDragEnd={to.handleDragEnd}
>
 Vleci me!
</div>
 );
 }
}
izvozprivzeto MyComponent;

Če želite element omogočiti spuščanje, lahko ustvarite metode handleDragStart, handleDrag in handleDragEnd. Te metode se izvajajo, ko uporabnik povleče element in ko ga spusti. Na primer:

uvoz Reagiraj, {Component} od 'reagirati';
razredMyComponentse raztezaKomponenta{
 handleDragStart (dogodek) {
// Ta metoda se zažene, ko se začne vlečenje
 console.log("Začelo")
 }


handleDrag (dogodek) {
// Ta metoda se izvaja, ko se komponenta vleče
 console.log("Vlečenje ...")
 }


handleDragEnd (dogodek) {
// Ta metoda se zažene, ko se vlečenje ustavi
 console.log("Končano")
 }


render() {
vrnitev (
<div
 vlečenje
 onDragStart={to.handleDragStart}
 onDrag={to.handleDrag}
 onDragEnd={to.handleDragEnd}
>
 Vleci me!
</div>
 );
 }
}
izvozprivzeto MyComponent;

V zgornji kodi obstajajo trije načini za obravnavanje vlečenja elementa: handleDragStart, handleDrag in handleDragEnd. Div ima atribut, ki ga je mogoče povleči, in nastavi lastnosti onDragStart, onDrag in onDragEnd na njihove ustrezne funkcije.

Ko povlečete element, se najprej zažene metoda handleDragStart. Tukaj lahko izvedete vse nastavitve, ki jih potrebujete, na primer nastavitev podatkov za prenos.

Nato se metoda handleDrag izvaja večkrat, medtem ko povlečete element. Tukaj lahko izvajate kakršne koli posodobitve, na primer prilagajanje položaja elementa.

Nazadnje, ko spustite element, se zažene metoda handleDragEnd. Tukaj lahko opravite kakršno koli čiščenje, kot je ponastavitev podatkov, ki ste jih prenesli.

Komponento lahko premikate tudi po zaslonu v onDragEnd(). Če želite to narediti, boste morali nastaviti lastnost sloga komponente. Na primer:

uvoz React, {Component, useState} od 'reagirati';
funkcijoMyComponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (dogodek) => {
setX(dogodek.clientX);
setY(dogodek.clientY);
 };


vrnitev (
<div
 vlečenje
 onDragEnd={handleDragEnd}
 style={{
 položaj: "absolutno",
 levo: x,
 vrh: y
 }}
>
 Vleci me!
</div>
 );
}
izvozprivzeto MyComponent;

Koda pokliče kljuko useState za sledenje položaju x in y komponente. Nato v metodi handleDragEnd posodobi položaj x in y. Končno lahko nastavite lastnost sloga komponente, da jo postavite na nove položaje x in y.

2. način: Uporaba modula drugega proizvajalca

Če ne želite uporabljati vgrajenih funkcij Reacta, lahko uporabite modul tretje osebe, kot je npr. reagirati-povleci-in-spusti. Ta modul ponuja ovoj, specifičen za React, okoli API-ja za povleci in spusti HTML5.

Če želite uporabljati ta modul, ga morate najprej namestiti z uporabo npm:

npm namestite reagiraj-povleci-in-padec--shrani

Nato ga lahko uporabite v komponentah React:

uvoz Reagiraj, {Component} od 'reagirati';
uvoz { Možnost vlečenja, spuščanje } od 'reagiraj-povleci-in-spusti';
razredMyComponentse raztezaKomponenta{
 render() {
vrnitev (
<div>
<Vrsta za vlečenje="foo" podatki="bar">
<div>Vleci me!</div>
</Draggable>


<Vrste, ki jih je mogoče spustiti={['foo']} onDrop={this.handleDrop}>
<div>Spusti sem!</div>
</Droppable>
</div>
 );
 }


handleDrop (podatki, dogodek) {
// Ta metoda se zažene, ko podatki padejo
konzola.log (podatki); // 'bar'
 }
}
izvozprivzeto MyComponent;

Začnite z uvozom komponent, ki jih je mogoče povleči in spustiti, iz modula React-povleci in spusti. Nato s temi komponentami ustvarite element, ki ga je mogoče povleči, in element, ki ga je mogoče spustiti.

Komponenta Draggable sprejme oznako tipa, ki določa vrsto podatkov, ki jih predstavlja komponenta, in oznako podatkov, ki določa podatke za prenos. Upoštevajte, da je vrsta ime po meri, ki ga lahko izberete, da spremljate, katera komponenta je katera v večkomponentnem vmesniku.

Komponenta Droppable uporablja tipe prop za določanje vrst podatkov, ki jih lahko spustite nanjo. Ima tudi prop onDrop, ki določa funkcijo povratnega klica, ki se bo zagnala, ko nanjo spustite komponento.

Ko spustite vlečeno komponento na spustno, se bo zagnala metoda handleDrop. Tukaj lahko izvedete kakršno koli obdelavo, ki jo potrebujete za podatke.

Nasveti za gradnjo uporabniku prijaznih komponent DnD

Obstaja nekaj stvari, ki jih lahko naredite, da bodo vaše komponente povleci in spusti uporabniku prijaznejše.

Najprej bi morali zagotoviti vizualno povratno informacijo, ko element vlečete. Na primer, lahko spremenite motnost elementa ali dodate obrobo. Za dodajanje vizualnih učinkov lahko uporabite običajni CSS oz tailwind CSS v vaši aplikaciji React.

Drugič, zagotoviti morate, da lahko vaši uporabniki povlečejo element le do veljavnega cilja za spuščanje. Na primer, lahko dodate vrste elementu, ki določa vrste komponent, ki jih bo sprejel.

Tretjič, zagotoviti morate način, da uporabnik prekliče operacijo povleci in spusti. Na primer, lahko dodate gumb, ki uporabniku omogoča preklic operacije.

Izboljšajte uporabniško izkušnjo s funkcijo povleci in spusti

Funkcija povleci in spusti ne le pomaga izboljšati uporabniško izkušnjo, ampak lahko pomaga tudi pri splošni učinkovitosti vaše spletne aplikacije. Uporabnik lahko zdaj preprosto preuredi vrstni red nekaterih podatkov, ne da bi moral osveževati stran ali iti skozi več korakov.

V aplikaciji React lahko dodate tudi druge animacije, da bo funkcija povleci in spusti bolj interaktivna in uporabniku prijazna.