Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

Har du någonsin velat lägga till dra-och-släpp-funktionalitet till dina React-komponenter? Det är inte så svårt som man kan tro.

Dra och släpp är ett sätt att flytta eller manipulera element på en skärm med hjälp av en mus eller pekplatta. Det är perfekt för att omordna en lista med objekt eller flytta objekt från en lista till en annan.

Du kan bygga dra-och-släpp-komponenter i React med någon av två metoder: inbyggda funktioner eller en tredjepartsmodul.

Olika sätt att implementera Dra och släpp in React

Det finns två sätt att implementera dra och släpp i React: med hjälp av de inbyggda funktionerna i React, eller med hjälp av en tredjepartsmodul. Börja med skapa en React-applikation, välj sedan din föredragna metod.

Metod 1: Använda inbyggda funktioner

I React kan du använda onDrag-händelsen för att spåra när användaren drar ett element och onDrop-händelsen för att spåra när de släpper det. Du kan också använda händelserna onDragStart och onDragEnd för att spåra när dragningen startar och slutar.

instagram viewer

För att göra ett element dragbart kan du ställa in draggable-attributet till true. Till exempel:

importera Reagera, { Komponent } från 'reagera';
klassMyComponentsträcker sigKomponent{
 framställa() {
lämna tillbaka (
<div
 dragbar
 onDragStart={detta.handleDragStart}
 onDrag={detta.handleDrag}
 onDragEnd={detta.handleDragEnd}
>
 Dra mig!
</div>
 );
 }
}
exporterastandard MyComponent;

För att göra ett element släppbart kan du skapa metoderna handleDragStart, handleDrag och handleDragEnd. Dessa metoder kommer att köras när en användare drar elementet och när de släpper det. Till exempel:

importera Reagera, { Komponent } från 'reagera';
klassMyComponentsträcker sigKomponent{
 handleDragStart (event) {
// Den här metoden körs när dragningen börjar
 console.log("Satte igång")
 }


handleDrag (event) {
// Den här metoden körs när komponenten dras
 console.log("Dra...")
 }


handleDragEnd (händelse) {
// Den här metoden körs när dragningen upphör
 console.log("Slutade")
 }


framställa() {
lämna tillbaka (
<div
 dragbar
 onDragStart={detta.handleDragStart}
 onDrag={detta.handleDrag}
 onDragEnd={detta.handleDragEnd}
>
 Dra mig!
</div>
 );
 }
}
exporterastandard MyComponent;

I ovanstående kod finns det tre metoder för att hantera dragningen av ett element: handleDragStart, handleDrag och handleDragEnd. div har ett dragbart attribut och ställer in egenskaperna onDragStart, onDrag och onDragEnd till deras motsvarande funktioner.

När du drar elementet kommer handleDragStart-metoden att köras först. Det är här du kan göra alla inställningar som du behöver göra, till exempel att ställa in data för överföring.

Sedan körs handleDrag-metoden upprepade gånger medan du drar elementet. Det är här du kan göra alla uppdateringar som att justera elementets position.

Slutligen, när du släpper elementet, körs handleDragEnd-metoden. Det är här du kan göra vilken rensning du behöver göra, till exempel att återställa data som du överfört.

Du kan också flytta komponenten runt på skärmen i onDragEnd(). För att göra detta måste du ställa in stilegenskapen för komponenten. Till exempel:

importera Reagera, { Component, useState } från 'reagera';
fungeraMyComponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (händelse) => {
setX(händelse.clientX);
setY(händelse.klient);
 };


lämna tillbaka (
<div
 dragbar
 onDragEnd={handleDragEnd}
 stil={{
 placera: "absolut",
 vänster: x,
 topp: y
 }}
>
 Dra mig!
</div>
 );
}
exporterastandard MyComponent;

Koden anropar useState-kroken för att spåra x- och y-positionen för komponenten. Sedan, i handleDragEnd-metoden, uppdaterar den x- och y-positionen. Slutligen kan du ställa in stilegenskapen för komponenten så att den placeras på de nya x- och y-positionerna.

Metod 2: Använda en tredjepartsmodul

Om du inte vill använda de inbyggda funktionerna i React kan du använda en tredjepartsmodul som t.ex reagera-dra-och-släpp. Den här modulen tillhandahåller ett React-specifikt omslag runt HTML5 dra-och-släpp API.

För att använda den här modulen måste du först installera den med npm:

npm Installera reagera-dra-och-släppa--spara

Sedan kan du använda den i dina React-komponenter:

importera Reagera, { Komponent } från 'reagera';
importera { Dragbar, släppbar } från 'reagera-dra-och-släpp';
klassMyComponentsträcker sigKomponent{
 framställa() {
lämna tillbaka (
<div>
<Dragbar typ="foo" data="bar">
<div>Dra mig!</div>
</Draggable>


<Släppbara typer={['foo']} onDrop={this.handleDrop}>
<div>Släpp här!</div>
</Droppable>
</div>
 );
 }


handleDrop (data, händelse) {
// Den här metoden körs när data tappas
trösta.log (data); // 'bar'
 }
}
exporterastandard MyComponent;

Börja med att importera de Dragable och Dropable-komponenterna från reagera-dra-och-släpp-modulen. Använd sedan dessa komponenter för att skapa ett dragbart element och ett släppbart element.

Den Draggable-komponenten accepterar en typprop, som specificerar typen av data som komponenten representerar, och en datapropp som specificerar data som ska överföras. Observera att typen är ett anpassat namn som du kan välja för att hålla reda på vilken komponent som är vilken i ett flerkomponentsgränssnitt.

Den släppbara komponenten använder en typprop för att specificera vilka typer av data som du kan släppa på den. Den har också en onDrop-propp, som anger återuppringningsfunktionen som körs när du släpper en komponent på den.

När du släpper den dragbara komponenten på den släppbara kommer handleDrop-metoden att köras. Det är här du kan göra alla bearbetningar som du behöver göra med uppgifterna.

Tips för att bygga användarvänliga DnD-komponenter

Det finns några saker du kan göra för att göra dina dra-och-släpp-komponenter mer användarvänliga.

Först bör du ge visuell feedback när ett element dras. Du kan till exempel ändra elementets opacitet eller lägga till en kantlinje. För att lägga till visuella effekter kan du använda vanlig CSS eller medvinds-CSS i din React-applikation.

För det andra bör du se till att dina användare bara kan dra elementet till ett giltigt släppmål. Till exempel kan du lägga till typer attribut till elementet, som anger vilka typer av komponent som det kommer att acceptera.

För det tredje bör du tillhandahålla ett sätt för användaren att avbryta dra-och-släpp-operationen. Du kan till exempel lägga till en knapp som låter användaren avbryta operationen.

Förbättra användarupplevelsen med dra och släpp

Dra-och-släpp-funktionen hjälper inte bara till att förbättra användarupplevelsen utan kan också hjälpa till med den övergripande prestandan för din webbapplikation. En användare kan nu enkelt ändra ordningen på vissa data utan att behöva uppdatera sidan eller gå igenom flera steg.

Du kan också lägga till andra animationer i din React-app för att göra dra-och-släpp-funktionen mer interaktiv och användarvänlig.