Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Wollten Sie schon immer Drag-and-Drop-Funktionalität zu Ihren React-Komponenten hinzufügen? Es ist nicht so schwierig, wie Sie vielleicht denken.

Drag & Drop ist eine Möglichkeit, Elemente auf einem Bildschirm mit einer Maus oder einem Touchpad zu verschieben oder zu manipulieren. Es ist perfekt, um eine Liste von Elementen neu zu ordnen oder Elemente von einer Liste in eine andere zu verschieben.

Du kannst Drag-and-Drop-Komponenten in React mit einer von zwei Methoden erstellen: integrierte Funktionen oder ein Modul eines Drittanbieters.

Verschiedene Möglichkeiten zur Implementierung von Drag & Drop in React

Es gibt zwei Möglichkeiten, Drag & Drop in React zu implementieren: mithilfe der integrierten Funktionen von React oder mithilfe eines Moduls eines Drittanbieters. Beginnen Sie mit Erstellen einer React-Anwendung, und wählen Sie dann Ihre bevorzugte Methode aus.

instagram viewer

Methode 1: Verwenden integrierter Funktionen

In React können Sie das onDrag-Ereignis verwenden, um zu verfolgen, wann der Benutzer ein Element zieht, und das onDrop-Ereignis, um zu verfolgen, wann er es ablegt. Sie können auch die Ereignisse onDragStart und onDragEnd verwenden, um zu verfolgen, wann das Ziehen beginnt und endet.

Um ein Element ziehbar zu machen, können Sie das Attribut draggable auf true setzen. Zum Beispiel:

importieren Reagieren, {Komponente} aus 'reagieren';
KlasseMeineKomponenteerweitertKomponente{
 rendern() {
zurückkehren (
<div
 ziehbar
 onDragStart={Das.handleDragStart}
 onDrag={Das.handleDrag}
 onDragEnd={Das.handleDragEnd}
>
 Zieh mich!
</div>
 );
 }
}
ExportStandard MeineKomponente;

Um ein Element löschbar zu machen, können Sie die Methoden handleDragStart, handleDrag und handleDragEnd erstellen. Diese Methoden werden ausgeführt, wenn ein Benutzer das Element zieht und wenn er es ablegt. Zum Beispiel:

importieren Reagieren, {Komponente} aus 'reagieren';
KlasseMeineKomponenteerweitertKomponente{
 handleDragStart (Ereignis) {
// Diese Methode wird ausgeführt, wenn das Ziehen beginnt
 Konsole.log ("Gestartet")
 }


handleDrag (Ereignis) {
// Diese Methode wird ausgeführt, wenn die Komponente gezogen wird
 Konsole.log ("Schleppen...")
 }


handleDragEnd (Ereignis) {
// Diese Methode wird ausgeführt, wenn das Ziehen aufhört
 Konsole.log ("Beendet")
 }


rendern() {
zurückkehren (
<div
 ziehbar
 onDragStart={Das.handleDragStart}
 onDrag={Das.handleDrag}
 onDragEnd={Das.handleDragEnd}
>
 Zieh mich!
</div>
 );
 }
}
ExportStandard MeineKomponente;

Im obigen Code gibt es drei Methoden, um das Ziehen eines Elements zu handhaben: handleDragStart, handleDrag und handleDragEnd. Das div hat ein ziehbares Attribut und setzt die Eigenschaften onDragStart, onDrag und onDragEnd auf ihre entsprechenden Funktionen.

Wenn Sie das Element ziehen, wird zuerst die Methode handleDragStart ausgeführt. Hier können Sie alle erforderlichen Einstellungen vornehmen, z. B. die zu übertragenden Daten festlegen.

Dann wird die handleDrag-Methode wiederholt ausgeführt, während Sie das Element ziehen. Hier können Sie alle Aktualisierungen vornehmen, z. B. die Position des Elements anpassen.

Wenn Sie schließlich das Element ablegen, wird die Methode handleDragEnd ausgeführt. Hier können Sie alle erforderlichen Bereinigungen vornehmen, z. B. die von Ihnen übertragenen Daten zurücksetzen.

Sie können die Komponente auch in onDragEnd() auf dem Bildschirm verschieben. Dazu müssen Sie die Stileigenschaft der Komponente festlegen. Zum Beispiel:

importieren Reagieren, {Komponente, useState} aus 'reagieren';
FunktionMeineKomponente() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (Ereignis) => {
setX(Fall.clientX);
setY(Fall.clientY);
 };


zurückkehren (
<div
 ziehbar
 onDragEnd={handleDragEnd}
 Stil={{
 Position: "absolut",
 links: x,
 oben: j
 }}
>
 Zieh mich!
</div>
 );
}
ExportStandard MeineKomponente;

Der Code ruft den useState-Hook auf, um die x- und y-Position der Komponente zu verfolgen. Dann aktualisiert es in der Methode handleDragEnd die x- und y-Position. Schließlich können Sie die Stileigenschaft der Komponente so einstellen, dass sie an den neuen x- und y-Positionen positioniert wird.

Methode 2: Verwenden eines Drittanbietermoduls

Wenn Sie die integrierten Funktionen von React nicht verwenden möchten, können Sie ein Modul eines Drittanbieters verwenden, z Reagieren-Drag-and-Drop. Dieses Modul bietet einen React-spezifischen Wrapper um die HTML5-Drag-and-Drop-API.

Um dieses Modul zu verwenden, müssen Sie es zuerst mit npm installieren:

npm Installieren reagieren-ziehen-Und-tropfen--speichern

Dann können Sie es in Ihren React-Komponenten verwenden:

importieren Reagieren, {Komponente} aus 'reagieren';
importieren {Ziehbar, Droppable} aus 'Reagieren-Drag-and-Drop';
KlasseMeineKomponenteerweitertKomponente{
 rendern() {
zurückkehren (
<div>
<ziehbarer Typ="foo" Daten="Bar">
<div>Zieh mich!</div>
</Draggable>


<Ablegbare Typen={['foo']} onDrop={this.handleDrop}>
<div>Hier abstellen!</div>
</Droppable>
</div>
 );
 }


handleDrop (Daten, Ereignis) {
// Diese Methode wird ausgeführt, wenn die Daten fallen
Konsole.Logdaten); // 'Bar'
 }
}
ExportStandard MeineKomponente;

Beginnen Sie mit dem Importieren der Draggable- und Droppable-Komponenten aus dem React-Drag-and-Drop-Modul. Verwenden Sie dann diese Komponenten, um ein ziehbares Element und ein ablegbares Element zu erstellen.

Die Draggable-Komponente akzeptiert eine Typeneigenschaft, die den Datentyp angibt, den die Komponente darstellt, und eine Dateneigenschaft, die die zu übertragenden Daten angibt. Beachten Sie, dass der Typ ein benutzerdefinierter Name ist, den Sie auswählen können, um zu verfolgen, welche Komponente in einer Schnittstelle mit mehreren Komponenten welche ist.

Die Droppable-Komponente verwendet eine Types-Prop, um die Datentypen anzugeben, die Sie darauf ablegen können. Es hat auch eine onDrop-Prop, die die Callback-Funktion angibt, die ausgeführt wird, wenn Sie eine Komponente darauf ablegen.

Wenn Sie die ziehbare Komponente auf der ziehbaren Komponente ablegen, wird die handleDrop-Methode ausgeführt. Hier können Sie alle erforderlichen Verarbeitungen mit den Daten vornehmen.

Tipps zum Erstellen benutzerfreundlicher DnD-Komponenten

Es gibt einige Dinge, die Sie tun können, um Ihre Drag-and-Drop-Komponenten benutzerfreundlicher zu gestalten.

Zunächst sollten Sie visuelles Feedback geben, wenn ein Element gezogen wird. Sie können beispielsweise die Deckkraft des Elements ändern oder einen Rahmen hinzufügen. Um visuelle Effekte hinzuzufügen, können Sie normales CSS oder verwenden tailwind CSS in Ihrer React-Anwendung.

Zweitens sollten Sie sicherstellen, dass Ihre Benutzer das Element nur auf ein gültiges Ablageziel ziehen können. Sie könnten zum Beispiel die hinzufügen Typen -Attribut für das Element, das die Arten von Komponenten angibt, die es akzeptiert.

Drittens sollten Sie dem Benutzer eine Möglichkeit bieten, den Drag-and-Drop-Vorgang abzubrechen. Sie könnten beispielsweise eine Schaltfläche hinzufügen, mit der der Benutzer den Vorgang abbrechen kann.

Verbessern Sie die Benutzererfahrung mit Drag & Drop

Die Drag-and-Drop-Funktion trägt nicht nur zur Verbesserung der Benutzererfahrung bei, sondern kann auch zur Gesamtleistung Ihrer Webanwendung beitragen. Ein Benutzer kann jetzt die Reihenfolge einiger Daten einfach neu anordnen, ohne die Seite aktualisieren oder mehrere Schritte durchlaufen zu müssen.

Sie können Ihrer React-App auch andere Animationen hinzufügen, um die Drag-and-Drop-Funktion interaktiver und benutzerfreundlicher zu gestalten.