Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

Ar kada nors norėjote prie savo „React“ komponentų pridėti vilkimo ir nuleidimo funkciją? Tai nėra taip sunku, kaip jūs manote.

Vilkimas – tai būdas perkelti arba manipuliuoti elementais ekrane naudojant pelę arba jutiklinę dalį. Tai puikiai tinka pertvarkyti elementų sąrašą arba perkelti elementus iš vieno sąrašo į kitą.

„React“ galite kurti vilkimo ir nuleidimo komponentus naudodami vieną iš dviejų būdų: įtaisytąsias funkcijas arba trečiosios šalies modulį.

Įvairūs „Drag and Drop“ diegimo „React“ būdai

Yra du būdai, kaip įdiegti vilkimą ir nuleidimą React: naudojant integruotas React funkcijas arba trečiosios šalies modulį. Pradėkite nuo sukurti „React“ programą, tada pasirinkite pageidaujamą metodą.

1 būdas: Integruotų funkcijų naudojimas

React galite naudoti įvykį onDrag, kad stebėtumėte, kada vartotojas tempia elementą, ir onDrop įvykį, kad būtų galima stebėti, kada jis jį numeta. Taip pat galite naudoti onDragStart ir onDragEnd įvykius, kad galėtumėte stebėti, kada vilkimas prasideda ir sustoja.

instagram viewer

Jei norite, kad elementą būtų galima vilkti, galite nustatyti vilkimo atributą kaip true. Pavyzdžiui:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
klasėMano komponentastęsiasiKomponentas{
 render() {
grąžinti (
<div
 tempiamas
 onDragStart={tai.handleDragStart}
 onDrag={tai.handleDrag}
 onDragEnd={tai.handleDragEnd}
>
 Vilkite mane!
</div>
 );
 }
}
eksportuotinumatytas MyComponent;

Norėdami, kad elementas būtų nuleidžiamas, galite sukurti HandDragStart, HandelDrag ir HandelDragEnd metodus. Šie metodai bus vykdomi, kai vartotojas vilks elementą ir kai jį numes. Pavyzdžiui:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
klasėMano komponentastęsiasiKomponentas{
 handleDragStart (įvykis) {
// Šis metodas veikia, kai prasideda vilkimas
 console.log("Prasidėjo")
 }


handDrag (įvykis) {
// Šis metodas veikia, kai komponentas yra tempiamas
 console.log("Vilkama...")
 }


handleDragEnd (įvykis) {
// Šis metodas veikia, kai vilkimas sustoja
 console.log("Baigėsi")
 }


render() {
grąžinti (
<div
 tempiamas
 onDragStart={tai.handleDragStart}
 onDrag={tai.handleDrag}
 onDragEnd={tai.handleDragEnd}
>
 Vilkite mane!
</div>
 );
 }
}
eksportuotinumatytas MyComponent;

Aukščiau pateiktame kode yra trys būdai, kaip tvarkyti elemento vilkimą: handleDragStart, handleDrag ir handleDragEnd. Div turi vilkimo atributą ir nustato atitinkamas funkcijas onDragStart, onDrag ir onDragEnd.

Kai vilkite elementą, pirmiausia bus paleistas HandDragStart metodas. Čia galite atlikti bet kokią reikalingą sąranką, pvz., nustatyti duomenis, kuriuos reikia perkelti.

Tada vilkdami elementą pakartotinai paleidžiamas rankenaDrag metodas. Čia galite atlikti bet kokius atnaujinimus, pvz., pakoreguoti elemento padėtį.

Galiausiai, numetus elementą, paleidžiamas „handelDragEnd“ metodas. Čia galite atlikti bet kokį reikalingą valymą, pvz., iš naujo nustatyti perkeltus duomenis.

Taip pat galite perkelti komponentą aplink ekraną naudodami onDragEnd(). Norėdami tai padaryti, turėsite nustatyti komponento stiliaus ypatybę. Pavyzdžiui:

importuoti React, { Component, useState } iš „reaguoti“;
funkcijaMano komponentas() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (įvykis) => {
setX(įvykis.clientX);
setY(įvykis.klientas);
 };


grąžinti (
<div
 tempiamas
 onDragEnd={handleDragEnd}
 style={{
 pozicija: "absoliutus",
 kairėje: x,
 viršuje: y
 }}
>
 Vilkite mane!
</div>
 );
}
eksportuotinumatytas MyComponent;

Kodas iškviečia useState kabliuką, kad būtų galima sekti komponento x ir y padėtį. Tada, naudojant HandelDragEnd metodą, jis atnaujina x ir y padėtį. Galiausiai galite nustatyti komponento stiliaus ypatybę, kad jis būtų išdėstytas naujose x ir y vietose.

2 būdas: trečiosios šalies modulio naudojimas

Jei nenorite naudoti integruotų React funkcijų, galite naudoti trečiosios šalies modulį, pvz. reaguoti – vilkti ir nuleisti. Šiame modulyje pateikiamas specifinis „React“ įpakavimas aplink HTML5 vilkimo API.

Norėdami naudoti šį modulį, pirmiausia turite jį įdiegti naudodami npm:

npm diegti reaguoti-vilkti-ir-lašas--sutaupyti

Tada galite naudoti jį savo „React“ komponentuose:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
importuoti { Vilkamas, nuleidžiamas } iš „reaguok-vilk ir numesk“;
klasėMano komponentastęsiasiKomponentas{
 render() {
grąžinti (
<div>
<Vilkamasis tipas ="foo" duomenys ="baras">
<div>Vilkite mane!</div>
</Draggable>


<Išmetamieji tipai={['foo']} onDrop={this.handleDrop}>
<div>Nuleisk čia!</div>
</Droppable>
</div>
 );
 }


handleDrop (duomenys, įvykis) {
// Šis metodas veikia, kai sumažėja duomenų
konsolė.log (duomenys); // 'baras'
 }
}
eksportuotinumatytas MyComponent;

Pradėkite importuodami vilkimo ir nuleidžiamo komponentus iš react-drag-and-drop modulio. Tada naudokite šiuos komponentus, kad sukurtumėte tempiamą ir nuleidžiamą elementą.

„Dragable“ komponentas priima tipo rekvizitus, nurodančius komponento atstovaujamų duomenų tipą, ir duomenų rekvizitus, nurodančius perduotinus duomenis. Atminkite, kad tipas yra pasirinktinis pavadinimas, kurį galite pasirinkti, norėdami stebėti, kuris komponentas yra kelių komponentų sąsajoje.

Komponentas „Droppable“ naudoja tipą, kad nurodytų duomenų tipus, kuriuos galite išmesti. Jame taip pat yra „onDrop“ rekvizitas, kuris nurodo atgalinio skambinimo funkciją, kuri veiks, kai į jį įmesi komponentą.

Kai nuleidžiate nuleidžiamą komponentą, bus paleistas „handlerDrop“ metodas. Čia galite atlikti bet kokį reikalingą duomenų apdorojimą.

Patarimai, kaip sukurti patogius DnD komponentus

Yra keletas dalykų, kuriuos galite padaryti, kad nuvilkite ir numeskite komponentus patogiau naudoti.

Pirmiausia turėtumėte pateikti vaizdinį grįžtamąjį ryšį, kai elementas yra tempiamas. Pavyzdžiui, galite pakeisti elemento neskaidrumą arba pridėti kraštinę. Norėdami pridėti vaizdinių efektų, galite naudoti įprastą CSS arba tailwind CSS savo React programoje.

Antra, turėtumėte įsitikinti, kad naudotojai gali vilkti elementą tik į tinkamą kritimo tikslą. Pavyzdžiui, galite pridėti tipai atributas elementui, kuris nurodo komponento tipus, kuriuos jis priims.

Trečia, turėtumėte suteikti vartotojui būdą atšaukti vilkimo operaciją. Pavyzdžiui, galite pridėti mygtuką, leidžiantį vartotojui atšaukti operaciją.

Pagerinkite naudotojo patirtį naudodami vilkimą ir numetimą

Nuvilkimo funkcija ne tik padeda pagerinti vartotojo patirtį, bet ir gali padėti pagerinti bendrą žiniatinklio programos našumą. Dabar vartotojas gali lengvai pertvarkyti kai kurių duomenų tvarką, neatnaujindamas puslapio ar neatlikdamas kelių veiksmų.

Taip pat galite pridėti kitų animacijų į programą „React“, kad vilkimo funkcija taptų interaktyvesnė ir patogesnė.