React.js: Implementieren Sie die Drag-and-Drop-Funktion, ohne externe Bibliotheken zu verwenden

Lernen Sie die Details der Implementierung von Drag-and-Drop-Funktionen in React von Grund auf kennen.


So kann sogar Ihr Hund es leicht ziehen 😃

Lassen Sie uns zuerst das Ergebnis dessen sehen, was wir bauen werden. Ich probiere .gif aus – hoffentlich funktioniert es überall wie erwartet.


Ignoriere bitte die UI/Styles!

Die wichtigsten Lernpunkte sind:

  1. Machen Sie ein Element ziehbar, indem Sie das Attribut „ziehbar“ hinzufügen
  2. Machen Sie einen Bereich droppbar, indem Sie das „Dragover“-Ereignis implementieren
  3. Erfassen Sie die Drag-Daten, indem Sie das Ereignis „dragstart“ implementieren
  4. Erfassen Sie den Drop, indem Sie das Ereignis „drop“ implementieren
  5. Implementieren Sie das „drag“-Ereignis, das ausgelöst wird, wenn das Element gezogen wird
  6. Speichern Sie die Zwischendaten im dataTransfer-Objekt

Wenn Sie visuell lernen, sehen Sie sich das Video unten an.

Schritt 1 – Erstellen Sie die Root-App für die Demo

Der gesamte Code für Drag & Drop wird in die Komponente AppDragDropDemo.js eingefügt.

import React from 'react';
import ReactDOM from 'react-dom';
import '.index.css';
import AppDragDropDemo from './AppDragDropDemo';

ReactDOM.render(<AppDragDropDemo />, 
    document.getElementById("root"));

Der Einstiegspunkt für die AppDragDropDemo sieht wie im folgenden Code aus.

import React, { Component } from 'react';

export default class AppDragDropDemo extends Component {
  render () {
    return (
      <div className="container-drag">
        DRAG & DROP DEMO
      </div>
    );
  }
}

Wenn Sie die Anwendung jetzt ausführen, wird Ihnen dieser fantastische Bildschirm angezeigt (Wortspiel beabsichtigt).

Schritt 2 – Erstellen Sie das Zustandsobjekt, um einige Aufgaben zu speichern

Lassen Sie uns einige Aufgaben erstellen, um eine einfache Anwendung zu simulieren. Wir beabsichtigen, diese Aufgaben per Drag-and-Drop in verschiedene Kategorien wie z wip, complete usw.

export default class AppDragDropDemo extends Component {    
  state = {        
    tasks: [{name:"Learn Angular",
             category:"wip", 
             bgcolor: "yellow"},  
          
            {name:"React", 
             category:"wip", 
             bgcolor:"pink"},  
          
            {name:"Vue", 
             category:"complete", 
             bgcolor:"skyblue"}          
      ]}

render () {
    return (
      <div className="container-drag">
        DRAG & DROP DEMO
      </div>
    );
  }
}

Schritt 3 – Organisieren Sie unsere Daten in Kategorien

Lassen Sie uns den folgenden Code in der Rendermethode implementieren, um Aufgaben in ihre jeweiligen Kategorien zu gruppieren. wip und complete. Fühlen Sie sich frei, weitere Kategorien hinzuzufügen und mit dem Code zu spielen.

Sie können den obigen Code aus dem folgenden Snippet kopieren und einfügen.

render() {        
  var tasks = { wip: [], 
                complete: []        
  }         
  this.state.tasks.forEach (
    tasks[t.category].push(<div 
      key={t.name}                     
      onDragStart={(e)=>this.onDragStart(e, t.name)}                    
      draggable                    
      className="draggable"                    
      style={{backgroundColor: t.bgcolor}}>                       
         {t.name}                
    </div>);        
  });

Im obigen Code durchlaufen wir alle Aufgaben und erstellen ein div für jedes Aufgabenelement und speichern es in den jeweiligen Kategorien.

Also, die wip[] enthält alle Aufgaben in der WIP-Kategorie und complete[] enthält alle abgeschlossenen Aufgaben.

Schritt 4 – Machen Sie das Aufgabenelement ziehbar

Fügen Sie das Draggable-Attribut zum

oder einem beliebigen Element hinzu, um ein Element ziehbar zu machen. Das Textformat des Codes finden Sie im obigen Codeblock.

Schritt 5 – Erstellen Sie einen Droppable-Container

Um einen ablegbaren Container zu erstellen, implementieren Sie die dragover event. Da wir nun das standardmäßige Dragover-Ereignis deaktivieren möchten, rufen wir einfach die event.preventDefault() vom Dragover-Event.

Wir rendern auch {tasks.wip} und {tasks.complete} in ihren entsprechenden div-Elementen.

return (<div className="container-drag">
     <h2 className="header">DRAG & DROP DEMO</h2>                  
     <div className="wip" 
       onDragOver={(e)=>this.onDragOver(e)}                    
       onDrop={(e)=>{this.onDrop(e, "wip")}}>                    
      <span className="task-header">WIP</span>                    
      {tasks.wip}                
     </div>                
     <div className="droppable"
      onDragOver={(e)=>this.onDragOver(e)}                    
      onDrop={(e)=>this.onDrop(e, "complete")}>                     
      <span className="task-header">COMPLETED</span>                     
      {tasks.complete}                
     </div>              
 </div>);

Let us now implement the onDragOver() event handler.

Die bisherige Ausgabe sieht wie in der folgenden Abbildung aus.

Schritt 6 – Erfassen Sie den Zustand des gezogenen Elements

Ändern wir den Code, in dem wir die Kategorie für jede Aufgabe erstellen. Fügen Sie einen Ereignishandler hinzu ondragstart und übergeben Sie die ID/den Namen oder andere Informationen, die Sie während des Drag/Drop-Vorgangs beibehalten müssen.

ich benutze name als eindeutiger Wert zur Identifizierung der Aufgabe. Fühlen Sie sich frei, ID oder einen beliebigen eindeutigen Schlüssel zu verwenden, den Sie haben.

Lassen Sie uns nun die implementieren onDragStart Ereignishandler.

Im onDragStart-Handler greifen wir den Parameter und speichern ihn im dataTransfer-Objekt. (Lassen Sie sich nicht von der Parameterbenennung verwirren, da ich mich beim Codieren in einer anderen Namenswelt befand 😃 .)

IE-Hinweis : Dies funktioniert möglicherweise nicht mit IE. Für IE ist es besser, das Format als Schlüssel anzugeben, wie unten gezeigt.

Instead of

ev.dataTransfer.setData("id", id)

USE

ev.dataTransfer.setData(“text/plain”,id)

Der obige Handler stellt sicher, dass das gezogene Element im Ereignisobjekt gespeichert wird und bei Bedarf zur Verwendung verfügbar ist. Es kann erforderlich sein, wenn Sie auf ein Ziel fallen.

Wenn Sie nun die Anwendung ausführen und die Elemente ziehen, werden die folgenden Protokolle ausgegeben.

Schritt 7 – Behandeln Sie das Drop-Ereignis.

Öffnen wir die Render-Methode und fügen die hinzu onDrop Ereignis zum div mit einem Klassennamen von droppable.

Im obigen Code fügen wir die hinzu drop Ereignishandler und übergeben Sie die erforderliche Kategorie complete als Argument. Dies zeigt an, dass wir das Element aus dem löschen wip Zustand zum complete Zustand (Kategorie). Bitte zögern Sie nicht, die Namen nach Bedarf zu ändern.

Lassen Sie uns nun die implementieren onDrop() Ereignishandler.

Hier ist der Code, den Sie kopieren/einfügen können:

onDrop = (ev, cat) => {       
  let id = ev.dataTransfer.getData("id");
  let tasks = this.state.tasks.filter((task) => {
      if (task.name == id) {
               task.category = cat;           
      }              
       return task;       
   });        
   this.setState({           
      ...this.state,           
      tasks       
   });    
}

In dem onDrop Event-Handler greifen wir die gezogene Aufgabe mithilfe der getData-Methode für das dataTransfer-Objekt des Events auf.

Anschließend erstellen wir mithilfe der Filtermethode ein neues Aufgabenarray und ändern die Kategorie der gezogenen Aufgabe.

setState() löst das Rendern aus und die Aufgaben werden in den richtigen Bereichen gerendert.

IE-Hinweis : Damit es im IE funktioniert, verwenden Sie die untenstehende getData-Methode.

Anstatt von

var id = ev.dataTransfer.getData(“id”)

verwenden

var id = ev.dataTransfer.getData(“text”)

Schritt 8 – Um das Drop von „complete“ auf „wip“ zu implementieren, fügen Sie den onDrop-Handler hinzu

Das onDrop() Handler bleibt derselbe wie zuvor.

Führen Sie schließlich den Code aus und bestaunen Sie Ihre Kreation 😃 und viel Spaß beim Codieren.

Sie können den Quellcode von herunterladen hier.

Notiz: Damit dies browserübergreifend funktioniert, ändern Sie den setData-Typ in string.
um beispielsweise Daten festzulegen, verwenden Sie ev.dataTransfer.setData(“text/plain”,id) . Verwenden Sie zum Lesen von Daten var id = ev.dataTransfer.getData(“text”)

Da mein Ziel darin bestand, die Kernfunktionen von Drag & Drop zu demonstrieren, wurde der Code nicht für Faktoren wie Design und Namenskonventionen optimiert.


Aktion: Spezieller 10$-Gutschein für Medium-Leser für mein bevorstehendes Live ReactJS-Über die Grundlagen hinaus Kurs auf Udemy, falls Sie unseren Open-Source-Lehrplan unterstützen möchten Frontend-Engineering in 12 bis 20 Wochen beherrschen.

Habe gerade meinen Early-Access-Kurs veröffentlicht Javascript Deep Dive – Programmieren Sie Ihre eigene Reaktion

Similar Posts

Leave a Reply

Your email address will not be published.