Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Oletko koskaan halunnut lisätä vedä ja pudota -toiminnon React-komponentteihin? Se ei ole niin vaikeaa kuin luulisi.

Vedä ja pudota on tapa siirtää tai käsitellä näytön elementtejä hiiren tai kosketuslevyn avulla. Se on täydellinen kohdeluettelon järjestämiseen uudelleen tai kohteiden siirtämiseen luettelosta toiseen.

Voit rakentaa vetämällä ja pudottamalla komponentteja Reactissa jommallakummalla kahdesta menetelmästä: sisäänrakennetuilla ominaisuuksilla tai kolmannen osapuolen moduulilla.

Eri tapoja toteuttaa Vedä ja pudota Reactissa

Vedä ja pudota Reactissa on kaksi tapaa: käyttämällä Reactin sisäänrakennettuja ominaisuuksia tai käyttämällä kolmannen osapuolen moduulia. Aloita React-sovelluksen luominenja valitse sitten haluamasi menetelmä.

Tapa 1: Sisäisten ominaisuuksien käyttäminen

Reactissa voit käyttää onDrag-tapahtumaa seuraamaan, milloin käyttäjä vetää elementtiä, ja onDrop-tapahtumalla sen pudottamista. Voit myös käyttää onDragStart- ja onDragEnd-tapahtumia seurataksesi, milloin vetäminen alkaa ja loppuu.

instagram viewer

Voit tehdä elementistä vedettävän asettamalla vedettävän attribuutin arvoon tosi. Esimerkiksi:

tuonti Reagoi, { komponentti } alkaen "reagoi";
luokkaaMyComponentulottuuKomponentti{
 render() {
palata (
<div
 vedettävä
 onDragStart={Tämä.handleDragStart}
 onDrag={Tämä.handleDrag}
 onDragEnd={Tämä.handleDragEnd}
>
 Vedä minua!
</div>
 );
 }
}
viedäoletuksena MyComponent;

Jos haluat tehdä elementistä pudotettavan, voit luoda handleDragStart-, handleDrag- ja handleDragEnd-menetelmiä. Nämä menetelmät suoritetaan, kun käyttäjä vetää elementtiä ja pudottaa sen. Esimerkiksi:

tuonti Reagoi, { komponentti } alkaen "reagoi";
luokkaaMyComponentulottuuKomponentti{
 handleDragStart (tapahtuma) {
// Tämä menetelmä suoritetaan, kun vetäminen alkaa
 console.log("Aloitettu")
 }


handleDrag (tapahtuma) {
// Tämä menetelmä suoritetaan, kun komponenttia vedetään
 console.log("Vedetään...")
 }


handleDragEnd (tapahtuma) {
// Tämä menetelmä suoritetaan, kun vetäminen pysähtyy
 console.log("Päättyi")
 }


render() {
palata (
<div
 vedettävä
 onDragStart={Tämä.handleDragStart}
 onDrag={Tämä.handleDrag}
 onDragEnd={Tämä.handleDragEnd}
>
 Vedä minua!
</div>
 );
 }
}
viedäoletuksena MyComponent;

Yllä olevassa koodissa on kolme tapaa käsitellä elementin vetämistä: handleDragStart, handleDrag ja handleDragEnd. Div sisältää draggable-attribuutin, ja se asettaa onDragStart-, onDrag- ja onDragEnd-ominaisuudet vastaaviin toimintoihinsa.

Kun vedät elementtiä, handleDragStart-menetelmä suoritetaan ensin. Täällä voit tehdä kaikki tarvitsemasi asetukset, kuten asettaa siirrettävät tiedot.

Sen jälkeen handleDrag-menetelmä suoritetaan toistuvasti, kun vedät elementtiä. Täällä voit tehdä mitä tahansa päivityksiä, kuten säätää elementin sijaintia.

Lopuksi, kun pudotat elementin, handleDragEnd-menetelmä suoritetaan. Täällä voit tehdä kaiken tarvitsemasi siivouksen, kuten nollata siirtämäsi tiedot.

Voit myös siirtää komponenttia näytöllä onDragEnd()-toiminnolla. Tätä varten sinun on asetettava komponentin tyyliominaisuus. Esimerkiksi:

tuonti React, { Component, useState } alkaen "reagoi";
toimintoMyComponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (tapahtuma) => {
setX(tapahtuma.clientX);
setY(tapahtuma.ClientY);
 };


palata (
<div
 vedettävä
 onDragEnd={handleDragEnd}
 tyyli={{
 asema: "ehdoton",
 vasen: x,
 ylhäällä: y
 }}
>
 Vedä minua!
</div>
 );
}
viedäoletuksena MyComponent;

Koodi kutsuu useState-koukkua komponentin x- ja y-aseman seuraamiseksi. Sitten HandDragEnd-menetelmässä se päivittää x- ja y-aseman. Lopuksi voit asettaa komponentin tyyliominaisuuden sijoittamaan sen uusiin x- ja y-kohtiin.

Tapa 2: Käytä kolmannen osapuolen moduulia

Jos et halua käyttää Reactin sisäänrakennettuja ominaisuuksia, voit käyttää kolmannen osapuolen moduulia, kuten reagoi-vedä ja pudota. Tämä moduuli tarjoaa React-kohtaisen kääreen HTML5:n vedä ja pudota -sovellusliittymän ympärille.

Jotta voit käyttää tätä moduulia, sinun on ensin asennettava se npm: llä:

npm Asentaa reagoi-vedä-ja-pudota--Tallentaa

Sitten voit käyttää sitä React-komponenteissasi:

tuonti Reagoi, { komponentti } alkaen "reagoi";
tuonti { Vedettävä, pudotettava } alkaen 'react-drag-and-drop';
luokkaaMyComponentulottuuKomponentti{
 render() {
palata (
<div>
<Vedettävä tyyppi="foo" data="baari">
<div>Vedä minua!</div>
</Draggable>


<Pudotettavat tyypit={['foo']} onDrop={this.handleDrop}>
<div>Pudota tänne!</div>
</Droppable>
</div>
 );
 }


handleDrop (data, tapahtuma) {
// Tämä menetelmä suoritetaan, kun tiedot putoavat
konsoli.log (data); // 'baari'
 }
}
viedäoletuksena MyComponent;

Aloita tuomalla vedettävät ja pudotettavat komponentit reagoiva vedä ja pudota -moduulista. Luo sitten näiden komponenttien avulla vedettävä elementti ja pudotettava elementti.

Draggable-komponentti hyväksyy tyyppiehdotuksen, joka määrittää komponentin edustaman tiedon tyypin, ja datapropan, joka määrittää siirrettävät tiedot. Huomaa, että tyyppi on mukautettu nimi, jonka voit valita seurataksesi, mikä komponentti on mikä monikomponenttisessa käyttöliittymässä.

Pudotettava-komponentti käyttää tyyppikohtaa määrittääkseen datatyypit, jotka voit pudottaa siihen. Siinä on myös onDrop-tuki, joka määrittää takaisinsoittotoiminnon, joka suoritetaan, kun pudotat komponentin siihen.

Kun pudotat vedettävän komponentin pudotettavalle, HandDrop-menetelmä suoritetaan. Täällä voit käsitellä tietoja, joita tarvitset.

Vinkkejä käyttäjäystävällisten DnD-komponenttien rakentamiseen

Voit tehdä vedä ja pudota -komponenteistasi käyttäjäystävällisempiä muutamalla tavalla.

Ensin sinun tulee antaa visuaalista palautetta, kun elementtiä vedetään. Voit esimerkiksi muuttaa elementin läpinäkyvyyttä tai lisätä reunan. Voit lisätä visuaalisia tehosteita käyttämällä normaalia CSS- tai tailwind CSS React-sovelluksessasi.

Toiseksi sinun tulee varmistaa, että käyttäjäsi voivat vetää elementin vain kelvolliseen pudotuskohteeseen. Voit esimerkiksi lisätä tyypit attribuutti elementille, joka määrittää komponenttityypit, jotka se hyväksyy.

Kolmanneksi sinun tulee tarjota käyttäjälle tapa peruuttaa vedä ja pudota -toiminto. Voit esimerkiksi lisätä painikkeen, jonka avulla käyttäjä voi peruuttaa toiminnon.

Paranna käyttökokemusta vetämällä ja pudottamalla

Vedä ja pudota -ominaisuus ei ainoastaan ​​auta parantamaan käyttökokemusta, vaan se voi myös auttaa parantamaan verkkosovelluksesi yleistä suorituskykyä. Käyttäjä voi nyt helposti muuttaa joidenkin tietojen järjestystä ilman, että hänen tarvitsee päivittää sivua tai käydä läpi useita vaiheita.

Voit myös lisätä muita animaatioita React-sovellukseesi tehdäksesi vedä ja pudota -ominaisuudesta interaktiivisemman ja käyttäjäystävällisemmän.