Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.

Kas olete kunagi tahtnud lisada oma Reacti komponentidele pukseerimisfunktsiooni? See pole nii raske, kui arvate.

Pukseerimine on viis elementide liigutamiseks või manipuleerimiseks ekraanil hiire või puuteplaadi abil. See sobib suurepäraselt üksuste loendi ümberjärjestamiseks või üksuste ühest loendist teise teisaldamiseks.

Saate Reactis luua pukseerimiskomponente, kasutades kahte meetodit: sisseehitatud funktsioone või kolmanda osapoole moodulit.

Erinevad viisid Drag and Drop in React rakendamiseks

Reactis on pukseerimise rakendamiseks kaks võimalust: kasutades Reacti sisseehitatud funktsioone või kolmanda osapoole moodulit. Alusta sellest Reacti rakenduse loomine, seejärel valige eelistatud meetod.

1. meetod: sisseehitatud funktsioonide kasutamine

Rakenduses React saate kasutada sündmust onDrag, et jälgida, millal kasutaja elementi lohistab, ja sündmust onDrop, et jälgida, millal ta selle maha kukub. Samuti saate kasutada sündmusi onDragStart ja onDragEnd, et jälgida, millal lohistamine algab ja peatub.

Elemendi lohistamiseks saate määrata lohistatava atribuudi väärtuseks Tõene. Näiteks:

importida Reageerige, { komponent } alates 'reageerida';
klassMinu komponentulatubKomponent{
 render() {
tagasi (
<div
 lohistatav
 onDragStart={see.handleDragStart}
 onDrag={see.handleDrag}
 onDragEnd={see.handleDragEnd}
>
 Lohista mind!
</div>
 );
 }
}
eksportidavaikimisi MyComponent;

Elemendi kukutatavaks muutmiseks saate luua meetodi handleDragStart, handleDrag ja handleDragEnd. Neid meetodeid käitatakse siis, kui kasutaja lohistab elementi ja kukub selle maha. Näiteks:

importida Reageerige, { komponent } alates 'reageerida';
klassMinu komponentulatubKomponent{
 handleDragStart (sündmus) {
// See meetod töötab siis, kui lohistamine algab
 console.log("Alustatud")
 }


handleDrag (sündmus) {
// See meetod töötab komponendi lohistamise ajal
 console.log("Lohistamine...")
 }


handleDragEnd (sündmus) {
// See meetod töötab siis, kui lohistamine peatub
 console.log("Lõppenud")
 }


render() {
tagasi (
<div
 lohistatav
 onDragStart={see.handleDragStart}
 onDrag={see.handleDrag}
 onDragEnd={see.handleDragEnd}
>
 Lohista mind!
</div>
 );
 }
}
eksportidavaikimisi MyComponent;

Ülaltoodud koodis on elemendi lohistamise käsitlemiseks kolm meetodit: handleDragStart, handleDrag ja handleDragEnd. Divil on lohistatav atribuut ja see määrab atribuudid onDragStart, onDrag ja onDragEnd nende vastavateks funktsioonideks.

Elemendi lohistamisel käivitatakse kõigepealt HandDragStart-meetod. Siin saate teha mis tahes vajalikke seadistusi, näiteks seadistada edastatavaid andmeid.

Seejärel käitatakse elemendi lohistamise ajal korduvalt HandDrag meetodit. Siin saate teha mis tahes värskendusi, näiteks elemendi asukohta reguleerida.

Lõpuks, kui te elemendi maha viskate, käivitub meetod handleDragEnd. Siin saate teha kõik vajalikud puhastused, näiteks lähtestada ülekantud andmed.

Samuti saate komponendi onDragEnd() abil ekraanil liigutada. Selleks peate määrama komponendi stiili atribuudi. Näiteks:

importida React, { Component, useState } alates 'reageerida';
funktsiooniMinu komponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (sündmus) => {
setX(sündmus.clientX);
setY(sündmus.klient);
 };


tagasi (
<div
 lohistatav
 onDragEnd={handleDragEnd}
 style={{
 positsioon: "absoluutne",
 vasakule: x,
 ülemine: y
 }}
>
 Lohista mind!
</div>
 );
}
eksportidavaikimisi MyComponent;

Kood kutsub komponendi x ja y positsiooni jälgimiseks konksu useState. Seejärel värskendab see HandDragEnd meetodil positsiooni x ja y. Lõpuks saate määrata komponendi stiili atribuudi, et asetada see uutele x ja y positsioonidele.

2. meetod: kolmanda osapoole mooduli kasutamine

Kui te ei soovi Reacti sisseehitatud funktsioone kasutada, võite kasutada kolmanda osapoole moodulit, näiteks reageeri-lohi-ja-drop. See moodul pakub HTML5 pukseerimise API ümber Reacti spetsiifilist ümbrist.

Selle mooduli kasutamiseks peate selle esmalt installima npm abil:

npm installida reageeri-lohi-ja-tilk-- salvestada

Seejärel saate seda kasutada oma Reacti komponentides:

importida Reageerige, { komponent } alates 'reageerida';
importida { Lohistav, kukutav } alates 'reageerida-lohista-ja-drop';
klassMinu komponentulatubKomponent{
 render() {
tagasi (
<div>
<Lohistav tüüp="foo" andmed="baar">
<div>Lohista mind!</div>
</Draggable>


<Kukkutavad tüübid={['foo']} onDrop={this.handleDrop}>
<div>Viska siia!</div>
</Droppable>
</div>
 );
 }


handleDrop (andmed, sündmus) {
// See meetod töötab, kui andmed langevad
konsool.log (andmed); // 'baar'
 }
}
eksportidavaikimisi MyComponent;

Alustuseks importige lohistatavad ja pukseeritavad komponendid reageerimise-lohistamise moodulist. Seejärel kasutage neid komponente lohistatava ja kukutava elemendi loomiseks.

Lohistav komponent aktsepteerib tüübikinnitust, mis määrab, millist tüüpi andmeid komponent esindab, ja andmerekvisiidi, mis määrab edastatavad andmed. Pange tähele, et tüüp on kohandatud nimi, mille saate valida, et jälgida, milline komponent on mitmekomponendilises liideses.

Kukutatav komponent kasutab tüüpide propi, et määrata, millist tüüpi andmeid saate sellele pukseerida. Sellel on ka onDropi tugi, mis määrab tagasihelistamisfunktsiooni, mis käivitub, kui sellele komponendi kukutate.

Kui kukutate pukseeritava komponendi pukseeritavale, käivitatakse HandDrop-meetod. Siin saate teha mis tahes andmete töötlemist.

Näpunäiteid kasutajasõbralike DnD-komponentide loomiseks

On mõned asjad, mida saate teha, et muuta oma pukseerimiskomponendid kasutajasõbralikumaks.

Esiteks peaksite andma visuaalset tagasisidet, kui elementi lohistatakse. Näiteks saate muuta elemendi läbipaistmatust või lisada äärise. Visuaalsete efektide lisamiseks võite kasutada tavalist CSS-i või tailtuule CSS oma Reacti rakenduses.

Teiseks peaksite veenduma, et teie kasutajad saavad elemendi lohistada ainult kehtivale kukutamise sihtmärgile. Näiteks võite lisada tüübid atribuut elemendile, mis määrab komponendi tüübid, mida see aktsepteerib.

Kolmandaks peaksite andma kasutajale võimaluse pukseerimistoimingu tühistamiseks. Näiteks võite lisada nupu, mis võimaldab kasutajal toimingu tühistada.

Parandage kasutajakogemust pukseerimisega

Pukseerimisfunktsioon mitte ainult ei aita parandada kasutajakogemust, vaid võib aidata ka teie veebirakenduse üldist jõudlust. Kasutaja saab nüüd hõlpsalt osa andmete järjekorda ümber korraldada, ilma et peaks lehte värskendama või mitut sammu läbima.

Saate oma Reacti rakendusse lisada ka muid animatsioone, et muuta pukseerimisfunktsioon interaktiivsemaks ja kasutajasõbralikumaks.