Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
Heb je ooit een functionaliteit voor slepen en neerzetten willen toevoegen aan je React-componenten? Het is niet zo moeilijk als je zou denken.
Slepen en neerzetten is een manier om elementen op een scherm te verplaatsen of te manipuleren met behulp van een muis of touchpad. Het is perfect voor het herschikken van een lijst met items of het verplaatsen van items van de ene lijst naar de andere.
U kunt componenten met slepen en neerzetten in React bouwen op twee manieren: ingebouwde functies of een module van derden.
Verschillende manieren om slepen en neerzetten in React te implementeren
Er zijn twee manieren om slepen en neerzetten in React te implementeren: met behulp van de ingebouwde functies van React of met behulp van een module van derden. Start op een React-applicatie makenen kies vervolgens de gewenste methode.
Methode 1: ingebouwde functies gebruiken
In React kun je de onDrag-gebeurtenis gebruiken om bij te houden wanneer de gebruiker een element sleept, en de onDrop-gebeurtenis om bij te houden wanneer ze het neerzetten. U kunt ook de gebeurtenissen onDragStart en onDragEnd gebruiken om bij te houden wanneer het slepen begint en stopt.
Om een element versleepbaar te maken, kunt u het versleepbare attribuut instellen op true. Bijvoorbeeld:
importeren Reageren, { Onderdeel } van 'Reageer';
klasMijnComponentstrekt zich uitOnderdeel{
veroorzaken() {
opbrengst (
<div
sleepbaar
onDragStart={dit.handleDragStart}
onDrag={dit.handleDrag}
onDragEnd={dit.handleDragEnd}
>
Sleep mij!
</div>
);
}
}
exporterenstandaard MijnComponent;
Om een element neerzetbaar te maken, kunt u de methoden handleDragStart, handleDrag en handleDragEnd maken. Deze methoden worden uitgevoerd wanneer een gebruiker het element sleept en wanneer hij het neerzet. Bijvoorbeeld:
importeren Reageren, { Onderdeel } van 'Reageer';
klasMijnComponentstrekt zich uitOnderdeel{
handleDragStart (gebeurtenis) {
// Deze methode wordt uitgevoerd wanneer het slepen begint
console.log("Begonnen")
}handleDrag (gebeurtenis) {
// Deze methode wordt uitgevoerd wanneer de component wordt gesleept
console.log("Slepen...")
}handleDragEnd (gebeurtenis) {
// Deze methode wordt uitgevoerd wanneer het slepen stopt
console.log("beëindigd")
}veroorzaken() {
opbrengst (
<div
sleepbaar
onDragStart={dit.handleDragStart}
onDrag={dit.handleDrag}
onDragEnd={dit.handleDragEnd}
>
Sleep mij!
</div>
);
}
}
exporterenstandaard MijnComponent;
In de bovenstaande code zijn er drie methoden om het slepen van een element af te handelen: handleDragStart, handleDrag en handleDragEnd. De div heeft een versleepbaar kenmerk en stelt de eigenschappen onDragStart, onDrag en onDragEnd in op hun overeenkomstige functies.
Wanneer u het element versleept, wordt eerst de methode handleDragStart uitgevoerd. Hier kunt u alle instellingen uitvoeren die u moet doen, zoals het instellen van de gegevens die moeten worden overgedragen.
Vervolgens wordt de methode handleDrag herhaaldelijk uitgevoerd terwijl u het element sleept. Hier kunt u updates uitvoeren, zoals het aanpassen van de positie van het element.
Ten slotte, wanneer u het element neerzet, wordt de methode handleDragEnd uitgevoerd. Hier kunt u alles opschonen dat u moet doen, zoals het resetten van de gegevens die u hebt overgedragen.
U kunt de component ook over het scherm verplaatsen in onDragEnd(). Om dit te doen, moet u de stijleigenschap van de component instellen. Bijvoorbeeld:
importeren Reageren, { Component, useState } van 'Reageer';
functieMijnComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);const handleDragEnd = (gebeurtenis) => {
setX(evenement.clientX);
setY(evenement.klantY);
};opbrengst (
<div
sleepbaar
onDragEnd={handleDragEnd}
stijl={{
positie: "absoluut",
links: x,
boven: j
}}
>
Sleep mij!
</div>
);
}
exporterenstandaard MijnComponent;
De code roept de useState-hook aan om de x- en y-positie van de component te volgen. Vervolgens werkt het in de methode handleDragEnd de x- en y-positie bij. Ten slotte kunt u de eigenschap style van de component instellen om deze op de nieuwe x- en y-posities te plaatsen.
Methode 2: een module van derden gebruiken
Als u de ingebouwde functies van React niet wilt gebruiken, kunt u een module van derden gebruiken, zoals reageren-slepen-en-neerzetten. Deze module biedt een React-specifieke wrapper rond de HTML5-API voor slepen en neerzetten.
Om deze module te gebruiken, moet u deze eerst installeren met behulp van npm:
npm installeren reageren-slepen-En-druppel--redden
Vervolgens kunt u het gebruiken in uw React-componenten:
importeren Reageren, { Onderdeel } van 'Reageer';
importeren { Versleepbaar, neerzetbaar } van 'reageren-slepen-en-neerzetten';klasMijnComponentstrekt zich uitOnderdeel{
veroorzaken() {
opbrengst (
<div>
<Versleepbaar type="foe" gegevens="bar">
<div>Sleep mij!</div>
</Draggable><Dropbare typen={['foe']} onDrop={this.handleDrop}>
<div>Hier neerzetten!</div>
</Droppable>
</div>
);
}handleDrop (gegevens, gebeurtenis) {
// Deze methode wordt uitgevoerd wanneer de gegevens wegvallen
troosten.log (gegevens); // 'bar'
}
}
exporterenstandaard MijnComponent;
Begin met het importeren van de versleepbare en neerzetbare componenten uit de reactie-slepen-en-neerzetten-module. Gebruik vervolgens deze componenten om een versleepbaar element en een neerzetbaar element te maken.
De Draggable-component accepteert een type-prop, die het type gegevens specificeert dat de component vertegenwoordigt, en een data-prop die de over te dragen gegevens specificeert. Merk op dat het type een aangepaste naam is die u kunt kiezen om bij te houden welke component welke is in een interface met meerdere componenten.
De component Droppable gebruikt een typeprop om de typen gegevens op te geven die u erop kunt neerzetten. Het heeft ook een onDrop-prop, die de callback-functie specificeert die wordt uitgevoerd wanneer u er een component op laat vallen.
Wanneer u de versleepbare component op de droppable neerzet, wordt de methode handleDrop uitgevoerd. Hier kunt u alle verwerkingen uitvoeren die u met de gegevens moet doen.
Tips voor het bouwen van gebruiksvriendelijke DnD-componenten
Er zijn een paar dingen die u kunt doen om uw componenten met slepen en neerzetten gebruiksvriendelijker te maken.
Ten eerste moet u visuele feedback geven wanneer een element wordt gesleept. U kunt bijvoorbeeld de dekking van het element wijzigen of een rand toevoegen. Om visuele effecten toe te voegen, kunt u normale CSS gebruiken of tailwind CSS in uw React-applicatie.
Ten tweede moet u ervoor zorgen dat uw gebruikers het element alleen naar een geldig neerzetdoel kunnen slepen. Je zou bijvoorbeeld de soorten attribuut aan het element, dat de soorten componenten specificeert die het zal accepteren.
Ten derde moet u de gebruiker een manier bieden om het slepen en neerzetten te annuleren. U kunt bijvoorbeeld een knop toevoegen waarmee de gebruiker de bewerking kan annuleren.
Verbeter de gebruikerservaring met slepen en neerzetten
De functie voor slepen en neerzetten helpt niet alleen de gebruikerservaring te verbeteren, maar kan ook helpen bij de algehele prestaties van uw webtoepassing. Een gebruiker kan nu eenvoudig de volgorde van sommige gegevens herschikken zonder de pagina te verversen of meerdere stappen te doorlopen.
U kunt ook andere animaties toevoegen aan uw React-app om de functie voor slepen en neerzetten interactiever en gebruiksvriendelijker te maken.