Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

Har du noen gang ønsket å legge til dra-og-slipp-funksjonalitet til React-komponentene dine? Det er ikke så vanskelig som du kanskje tror.

Dra og slipp er en måte å flytte eller manipulere elementer på en skjerm ved hjelp av en mus eller pekeplate. Den er perfekt for å omorganisere en liste over elementer eller flytte elementer fra en liste til en annen.

Du kan bygge dra-og-slipp-komponenter i React ved å bruke en av to metoder: innebygde funksjoner eller en tredjepartsmodul.

Ulike måter å implementere Dra og slipp i React

Det er to måter å implementere dra og slipp i React: ved å bruke de innebygde funksjonene til React, eller ved å bruke en tredjepartsmodul. Start med lage en React-applikasjon, og velg deretter din foretrukne metode.

Metode 1: Bruke innebygde funksjoner

I React kan du bruke onDrag-hendelsen til å spore når brukeren drar et element, og onDrop-hendelsen til å spore når de slipper det. Du kan også bruke hendelsene onDragStart og onDragEnd for å spore når dra starter og stopper.

instagram viewer

For å gjøre et element drabart, kan du sette draggable-attributtet til sant. For eksempel:

import Reager, { Komponent } fra 'reagere';
klasseMin komponentstrekkerKomponent{
 render() {
komme tilbake (
<div
 drabar
 onDragStart={dette.handleDragStart}
 onDrag={dette.handleDrag}
 onDragEnd={dette.handleDragEnd}
>
 Dra meg!
</div>
 );
 }
}
eksportmisligholde MyComponent;

For å gjøre et element slippbart, kan du lage metodene handleDragStart, handleDrag og handleDragEnd. Disse metodene vil kjøre når en bruker drar elementet og når de slipper det. For eksempel:

import Reager, { Komponent } fra 'reagere';
klasseMin komponentstrekkerKomponent{
 handleDragStart (hendelse) {
// Denne metoden kjører når dra starter
 console.log("Startet")
 }


handleDrag (hendelse) {
// Denne metoden kjører når komponenten dras
 console.log("Dra...")
 }


handleDragEnd (hendelse) {
// Denne metoden kjører når dra stopper
 console.log("Endte")
 }


render() {
komme tilbake (
<div
 drabar
 onDragStart={dette.handleDragStart}
 onDrag={dette.handleDrag}
 onDragEnd={dette.handleDragEnd}
>
 Dra meg!
</div>
 );
 }
}
eksportmisligholde MyComponent;

I koden ovenfor er det tre metoder for å håndtere dra av et element: handleDragStart, handleDrag og handleDragEnd. Div-en har et dragbart attributt og setter egenskapene onDragStart, onDrag og onDragEnd til deres tilsvarende funksjoner.

Når du drar elementet, kjøres handleDragStart-metoden først. Det er her du kan gjøre ethvert oppsett du trenger å gjøre, for eksempel å sette dataene til overføring.

Deretter kjører handleDrag-metoden gjentatte ganger mens du drar elementet. Det er her du kan gjøre alle oppdateringer som å justere posisjonen til elementet.

Til slutt, når du slipper elementet, kjører handleDragEnd-metoden. Det er her du kan gjøre hvilken som helst opprydding du trenger å gjøre, for eksempel tilbakestille dataene du har overført.

Du kan også flytte komponenten rundt på skjermen i onDragEnd(). For å gjøre dette må du angi stilegenskapen til komponenten. For eksempel:

import Reager, { Component, useState } fra 'reagere';
funksjonMin komponent() {
konst [x, setX] = brukState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (hendelse) => {
settX(begivenhet.clientX);
settY(begivenhet.klient);
 };


komme tilbake (
<div
 drabar
 onDragEnd={handleDragEnd}
 stil={{
 posisjon: "absolutt",
 venstre: x,
 øverst: y
 }}
>
 Dra meg!
</div>
 );
}
eksportmisligholde MyComponent;

Koden kaller useState-kroken for å spore x- og y-posisjonen til komponenten. Deretter, i handleDragEnd-metoden, oppdaterer den x- og y-posisjonen. Til slutt kan du angi stilegenskapen til komponenten for å plassere den i de nye x- og y-posisjonene.

Metode 2: Bruke en tredjepartsmodul

Hvis du ikke ønsker å bruke de innebygde funksjonene til React, kan du bruke en tredjepartsmodul som f.eks reagere-dra-og-slipp. Denne modulen gir en React-spesifikk innpakning rundt HTML5 dra-og-slipp API.

For å bruke denne modulen må du først installere den med npm:

npm installere reager-dra-og-miste--lagre

Deretter kan du bruke den i React-komponentene dine:

import Reager, { Komponent } fra 'reagere';
import { Dragbar, slippbar } fra 'reager-dra-og-slipp';
klasseMin komponentstrekkerKomponent{
 render() {
komme tilbake (
<div>
<Dragbar type="foo" data="bar">
<div>Dra meg!</div>
</Draggable>


<Slippbare typer={['foo']} onDrop={this.handleDrop}>
<div>Slipp her!</div>
</Droppable>
</div>
 );
 }


handleDrop (data, hendelse) {
// Denne metoden kjører når dataene faller
konsoll.log (data); // 'bar'
 }
}
eksportmisligholde MyComponent;

Start med å importere Dragable og Dropable-komponentene fra react-dra-og-slipp-modulen. Bruk deretter disse komponentene til å lage et element som kan dras og et slippbart element.

Draggable-komponenten aksepterer en type prop, som spesifiserer typen data komponenten representerer, og en dataprop som spesifiserer dataene som skal overføres. Merk at typen er et tilpasset navn du kan velge for å holde styr på hvilken komponent som er hvilken i et flerkomponentgrensesnitt.

Slippbar-komponenten bruker en type-prop for å spesifisere hvilke typer data du kan slippe på den. Den har også en onDrop-propp, som spesifiserer tilbakeringingsfunksjonen som vil kjøre når du slipper en komponent på den.

Når du slipper den drabare komponenten på den slippbare, vil handleDrop-metoden kjøre. Det er her du kan gjøre all behandling du trenger for å gjøre med dataene.

Tips for å bygge brukervennlige DnD-komponenter

Det er et par ting du kan gjøre for å gjøre dra-og-slipp-komponentene dine mer brukervennlige.

Først bør du gi visuell tilbakemelding når et element dras. Du kan for eksempel endre opasiteten til elementet, eller legge til en kantlinje. For å legge til visuelle effekter kan du bruke vanlig CSS eller medvind CSS i React-applikasjonen din.

For det andre bør du sørge for at brukerne dine bare kan dra elementet til et gyldig slippmål. Du kan for eksempel legge til typer attributt til elementet, som spesifiserer komponenttypene det vil akseptere.

For det tredje bør du gi brukeren en måte å avbryte dra-og-slipp-operasjonen. Du kan for eksempel legge til en knapp som lar brukeren avbryte operasjonen.

Forbedre brukeropplevelsen med dra og slipp

Dra-og-slipp-funksjonen bidrar ikke bare til å forbedre brukeropplevelsen, men kan også hjelpe med den generelle ytelsen til nettapplikasjonen din. En bruker kan nå enkelt omorganisere rekkefølgen på enkelte data uten å måtte oppdatere siden eller gå gjennom flere trinn.

Du kan også legge til andre animasjoner i React-appen din for å gjøre dra-og-slipp-funksjonen mer interaktiv og brukervennlig.