Sådan bygger du træk og slip-komponenter i React

Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

Har du nogensinde ønsket at tilføje træk-og-slip-funktionalitet til dine React-komponenter? Det er ikke så svært, som du måske tror.

Træk og slip er en måde at flytte eller manipulere elementer på en skærm ved hjælp af en mus eller touchpad. Det er perfekt til at omarrangere en liste over elementer eller flytte elementer fra en liste til en anden.

Du kan bygge træk-og-slip-komponenter i React ved at bruge en af ​​to metoder: indbyggede funktioner eller et tredjepartsmodul.

Forskellige måder at implementere Drag and Drop in React

Der er to måder at implementere træk og slip i React: ved at bruge de indbyggede funktioner i React eller ved at bruge et tredjepartsmodul. Start med oprettelse af en React-applikation, og vælg derefter din foretrukne metode.

Metode 1: Brug af indbyggede funktioner

I React kan du bruge onDrag-hændelsen til at spore, når brugeren trækker et element, og onDrop-hændelsen til at spore, hvornår de slipper det. Du kan også bruge hændelserne onDragStart og onDragEnd til at spore, hvornår træk starter og stopper.

For at gøre et element trækbart, kan du indstille trækbar-attributten til sand. For eksempel:

importere Reager, { Komponent } fra 'reagere';
klasseMyComponentstrækker sigKomponent{
 render() {
Vend tilbage (
<div
 trækbar
 onDragStart={det her.handleDragStart}
 onDrag={det her.handleDrag}
 onDragEnd={det her.handleDragEnd}
>
 Træk mig!
</div>
 );
 }
}
eksportStandard MyComponent;

For at gøre et element droppbart, kan du oprette metoderne handleDragStart, handleDrag og handleDragEnd. Disse metoder kører, når en bruger trækker elementet, og når de slipper det. For eksempel:

importere Reager, { Komponent } fra 'reagere';
klasseMyComponentstrækker sigKomponent{
 handleDragStart (begivenhed) {
// Denne metode kører, når træk starter
 console.log("Startede")
 }
handleDrag (hændelse) {
// Denne metode kører, når komponenten trækkes
 console.log("Trækker...")
 }
handleDragEnd (hændelse) {
// Denne metode kører, når træk stopper
 console.log("Afsluttet")
 }
render() {
Vend tilbage (
<div
 trækbar
 onDragStart={det her.handleDragStart}
 onDrag={det her.handleDrag}
 onDragEnd={det her.handleDragEnd}
>
 Træk mig!
</div>
 );
 }
}
eksportStandard MyComponent;

I ovenstående kode er der tre metoder til at håndtere træk af et element: handleDragStart, handleDrag og handleDragEnd. div'en har en trækbar attribut og indstiller egenskaberne onDragStart, onDrag og onDragEnd til deres tilsvarende funktioner.

Når du trækker elementet, vil handleDragStart-metoden køre først. Det er her, du kan foretage enhver opsætning, som du skal gøre, såsom at indstille dataene til overførsel.

Derefter kører handleDrag-metoden gentagne gange, mens du trækker elementet. Det er her, du kan foretage enhver opdatering, såsom at justere elementets position.

Til sidst, når du slipper elementet, kører handleDragEnd-metoden. Det er her, du kan foretage enhver oprydning, du skal gøre, såsom at nulstille de data, du har overført.

Du kan også flytte komponenten rundt på skærmen i onDragEnd(). For at gøre dette skal du indstille stilegenskaben for komponenten. For eksempel:

importere Reager, { Component, useState } fra 'reagere';
fungereMyComponent() {
konst [x, sætX] = brugstilstand(0);
konst [y, sætY] = useState(0);
konst handleDragEnd = (hændelse) => {
sætX(begivenhed.clientX);
sætY(begivenhed.klient);
 };
Vend tilbage (
<div
 trækbar
 onDragEnd={handleDragEnd}
 stil={{
 position: "absolut",
 venstre: x,
 øverst: y
 }}
>
 Træk mig!
</div>
 );
}
eksportStandard MyComponent;

Koden kalder useState-krogen for at spore x- og y-positionen af ​​komponenten. Derefter, i handleDragEnd-metoden, opdaterer den x- og y-positionen. Endelig kan du indstille stilegenskaben for komponenten til at placere den på de nye x- og y-positioner.

Metode 2: Brug af et tredjepartsmodul

Hvis du ikke ønsker at bruge de indbyggede funktioner i React, kan du bruge et tredjepartsmodul som f.eks reagere-træk-og-slip. Dette modul giver en React-specifik indpakning omkring HTML5 træk-og-slip API.

For at bruge dette modul skal du først installere det ved hjælp af npm:

npm installere reagere-træk-og-dråbe--Gemme

Derefter kan du bruge det i dine React-komponenter:

importere Reager, { Komponent } fra 'reagere';
importere { Trækbar, Dropbar } fra 'reager-træk-og-slip';
klasseMyComponentstrækker sigKomponent{
 render() {
Vend tilbage (
<div>
<Trækbar type="foo" data="bar">
<div>Træk mig!</div>
</Draggable>
<Dropbare typer={['foo']} onDrop={this.handleDrop}>
<div>Drop her!</div>
</Droppable>
</div>
 );
 }
handleDrop (data, hændelse) {
// Denne metode kører, når dataene falder
konsol.log (data); // 'bar'
 }
}
eksportStandard MyComponent;

Start med at importere komponenterne, der kan trækkes og slippes, fra reager-træk-og-slip-modulet. Brug derefter disse komponenter til at oprette et trækbart element og et dropbart element.

Den trækbare komponent accepterer en typeprop, som specificerer den type data, komponenten repræsenterer, og en dataprop, der specificerer de data, der skal overføres. Bemærk, at typen er et brugerdefineret navn, du kan vælge for at holde styr på, hvilken komponent der er hvilken i en multi-komponent grænseflade.

Dropable-komponenten bruger en typeprop til at specificere de typer data, du kan slippe på den. Den har også en onDrop-prop, som specificerer tilbagekaldsfunktionen, der kører, når du taber en komponent på den.

Når du slipper den trækbare komponent på den dropable, vil handleDrop-metoden køre. Det er her, du kan foretage enhver behandling, som du har brug for med dataene.

Tips til at bygge brugervenlige DnD-komponenter

Der er et par ting, du kan gøre for at gøre dine træk-og-slip-komponenter mere brugervenlige.

Først bør du give visuel feedback, når et element trækkes. For eksempel kan du ændre elementets opacitet eller tilføje en kant. For at tilføje visuelle effekter kan du bruge normal CSS eller medvinds-CSS i din React-applikation.

For det andet bør du sikre dig, at dine brugere kun kan trække elementet til et gyldigt dropmål. Du kan f.eks. tilføje typer attribut til elementet, som specificerer de typer komponent, som det vil acceptere.

For det tredje bør du give brugeren mulighed for at annullere træk-og-slip-handlingen. For eksempel kan du tilføje en knap, der giver brugeren mulighed for at annullere handlingen.

Forbedre brugeroplevelsen med træk og slip

Træk-og-slip-funktionen hjælper ikke kun med at forbedre brugeroplevelsen, men kan også hjælpe med den overordnede ydeevne af din webapplikation. En bruger kan nu nemt omarrangere rækkefølgen af ​​nogle data uden at skulle opdatere siden eller gennemgå flere trin.

Du kan også tilføje andre animationer i din React-app for at gøre træk-og-slip-funktionen mere interaktiv og brugervenlig.