Machen Sie React Component/Div ziehbar

  2. How-To's
  3. React Howtos
  4. Machen Sie React Component/Div ziehbar
Oluwafisayo Oluwatayo 15 Februar 2024
React React Component
  1. React Component/Div ziehbar machen mit onMouse
  2. Machen Sie React Component/Div mit der React-Draggable-Abhängigkeit verschiebbar
  3. Machen Sie React Component/Div ziehbar mit schönem DnD
  4. Fazit
Machen Sie React Component/Div ziehbar

Es macht jetzt Spaß, ein Website-Ersteller zu sein oder vielleicht das Erstellen von Websites als Hobby zu wählen. Sie können eine Website erstellen, indem Sie einfach mit der Maus die Inhalte auswählen und wie ein Puzzle anordnen.

Wenn wir Inhalte oder Apps erstellen, die es Benutzern ermöglichen, Elemente einfach per Drag-and-Drop zu verschieben, ist die App selbst für Anfänger einfach zu bedienen, was zu einer breiten Akzeptanz der App auf dem Markt führen könnte.

Wenn wir Apps oder Spiele in React erstellen, macht es die Möglichkeit, Inhalte per Drag-and-Drop zu ziehen, diese Aufgaben einfach und schnell zu erledigen, selbst die komplexeren.

Sehen wir uns Beispiele an, die uns dabei helfen, zu lernen, wie man eine Komponente ziehbar macht.

React Component/Div ziehbar machen mit onMouse

Die ziehbare React-Funktion verwendet unzählige Ereignis-Listener, aber dieses Beispiel verwendet drei: onMouseDown, onMouseMove und onMouseUp.

Wir beginnen mit der Erstellung eines neuen React-Projekts. Wir öffnen unser Terminal in VS Code und geben npx create-react-app dragone ein.

Dann navigieren wir zum Ordner dragone und erstellen zwei Ordner. Der erste Ordner heißt Main und darin erstellen wir die Dateien MainApp.js und MainApp.css.

Diese Dateien enthalten die Codes für die Homepage.

Der zweite Ordner heißt Components und enthält zwei Dateien, Dialog.js und Dialog.css. Dies ist die Komponente, die wir über unseren Browserbildschirm ziehen möchten.

Innerhalb der MainApp.js geben wir diese Codes ein:

Code-Snippet (MainApp.js):

import React, { Component } from 'react';
import './MainApp.css';
import Dialog from '../Components/Dialog';


export default class MainApp extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showDialog: false
        }
    }

    _showDialog() {
        this.setState({showDialog: !this.state.showDialog});
    }

    render() {

        return (
            <div className='MainApp'>
                <div className='Title'>Example Dialog Popper</div>
                <div className='button' onClick={this._showDialog.bind(this)}> Show Dialog </div>
                <Dialog onClose={this._showDialog.bind(this)} show={this.state.showDialog}/>
            </div>
        );
    }
}

Sobald auf dieser Seite auf die Schaltfläche Dialog anzeigen geklickt wird, wird der Ereignis-Listener onClick aktiviert und die Komponente, die wir ziehen möchten, erscheint.

Die MainApp.css enthält die Stylings, die die Seite verschönern:

Codeschnipsel (MainApp.css):

.Title {
    font-weight: bold;
    font-size: 16px;
    padding-top: 30px;
}

.button {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 30px;
    padding: 10px;
    margin: 10px;
    margin-left: 650px;
}

.MainApp {
    background-color: lightsalmon;
    height: 1000px;
}

Wir kommen zum besten Teil dieses Beispiels, wo wir die ziehbare Komponente erstellen. Wir gehen in die Dialog.js und programmieren etwas:

Code-Snippet (Dialog.js):

import React, { Component } from 'react';
import './Dialog.css';

export default class Dialog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            diffX: 0,
            diffY: 0,
            dragging: false,
            styles: {}
        }

        this._dragStart = this._dragStart.bind(this);
        this._dragging = this._dragging.bind(this);
        this._dragEnd = this._dragEnd.bind(this);
    }

    _dragStart(e) {
        this.setState({
            diffX: e.screenX - e.currentTarget.getBoundingClientRect().left,
            diffY: e.screenY - e.currentTarget.getBoundingClientRect().top,
            dragging: true
        });
    }

    _dragging(e) {

        if(this.state.dragging) {
            var left = e.screenX - this.state.diffX;
            var top = e.screenY - this.state.diffY;

            this.setState({
                styles: {
                    left: left,
                    top: top
                }
            });
        }
    }

    _dragEnd() {
        this.setState({
            dragging: false
        });
    }

    render() {
        var classes = this.props.show ? 'Dialog' : 'Dialog hidden';
        return (
            <div className={classes} style={this.state.styles} onMouseDown={this._dragStart} onMouseMove={this._dragging} onMouseUp={this._dragEnd}>
                <div className='DialogTitle'>My Dialog</div>
                <div className='Contents'>
                    Contents of the Dialog:
                        - one
                        - two
                        - three
                </div>
                <div className='closeButton' onClick={this.props.onClose}>
                    Close
                </div>
            </div>
        );
    }
}

Wir definieren die Zustände, die das Bauteil in jeder Situation haben soll. Im Standardzustand bewegt sich die Komponente nirgendwohin, und wir setzen das Ziehen auf false.

Dann binden wir die drei Zustände, in denen sich die Komponenten befinden werden, d. h. dragStart, dragging und dragEnd, und weisen sie jeweils den passenden onMouse-Ereignis-Listenern zu. Das onMouseDown wird aktiviert, sobald die Maus auf der Komponente platziert wird, dann beginnt die Funktion, die _dragStart zugewiesen ist, zu arbeiten.

Das onMouseMove zeigt an, dass die Komponente gezogen wird, wodurch die Funktion aktiviert wird, die _dragging zugewiesen ist.

Zuletzt zeigt onMouseUp an, dass die Maus nicht mehr auf der Komponente platziert ist. Dadurch wird die an _dragEnd gebundene Funktion aktiviert.

In Dialog.css wird der Code zum Stylen der ziehbaren Komponente erstellt:

Codeschnipsel (Dialog.css):

.Dialog {
    width: 400px;
    height: 400px;
    background-color: lightblue;
    border-radius: 10px;
    border: 3px solid grey;
    position: absolute;
    cursor: move;
    top: 150px;
    left: 520px;
}

.hidden {
    display: none;
}

.DialogTitle {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid grey;
}

.Contents {
    padding-top: 50px;
    padding-bottom: 200px;
}

.closeButton {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 25px;
    padding: 10px;
    margin: 10px;
    margin-left: 140px;
    cursor: pointer;
}

Dann importieren wir MainApp in die App.js wie folgt:

Code-Snippet (App.js):

import React from 'react';
import './App.css';
import MainApp from './Main/MainApp.js';

function App() {
  return (
    <div className="App">
      <MainApp />
    </div>
  );
}

export default App;

Ausgabe:

React-Komponente div ziehbar mit onMouse

Machen Sie React Component/Div mit der React-Draggable-Abhängigkeit verschiebbar

Wir können eine Komponente auch ziehbar machen, indem wir die Abhängigkeit von React nutzen. Nachdem wir das neue Projekt mit npx create-react-app dragtwo erstellt haben.

Wir navigieren zum Ordner dragtwo, um die Abhängigkeit zu installieren. In unserem Terminal geben wir npm install respond-dragable ein.

Dann gehen wir zu App.js, um ein wenig zu programmieren:

Code-Snippet (App.js):

import logo from './logo.svg';
import './App.css';
import Draggable from "react-draggable";

function App() {
  return (
    <Draggable>
      <img
      src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
      alt="new"
      />
    </Draggable>
  );
}

export default App;

Ausgabe:

React-Komponente div, die mithilfe der React-Dragable-Abhängigkeit gezogen werden kann

Zuerst importieren wir Draggable aus react-draggable. Dann erstellen wir die Komponente, die gezogen werden kann.

Wir packen diese Komponente dann in das Tag <Draggable></Draggable>.

Machen Sie React Component/Div ziehbar mit schönem DnD

Die Beautiful DnD-Abhängigkeit von React ist eine weitere unkomplizierte und einfach zu verwendende Bibliothek, die verwendet werden kann, um Komponenten ziehbar zu machen.

Zum Booten erstellen wir zuerst unsere React-Komponente, dann navigieren wir zum Projektordner, um die Abhängigkeit zu installieren mit: install respond-beautiful-dnd --save.

Als nächstes öffnen wir die Datei App.js und geben diese Codes ein:

Code-Snippet (App.js):

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './App.css';

const finalSpaceCharacters = [
  {
    id: 'james',
    name: 'James',
  },
  {
    id: 'john',
    name: 'John',
  },
  {
    id: 'israel',
    name: 'Israel',
  },
  {
    id: 'joker',
    name: 'Joker',
  },
  {
    id: 'quinn',
    name: 'Quinn',
  }
]

function App() {
  const [characters, updateCharacters] = useState(finalSpaceCharacters);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(characters);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    updateCharacters(items);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul className="characters" {...provided.droppableProps} ref={provided.innerRef}>
                {characters.map(({ id, name }, index) => {
                  return (
                    <Draggable key={id} draggableId={id} index={index}>
                      {(provided) => (
                        <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>

                          <p>
                            {name}
                          </p>
                        </li>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
    </div>
  );
}

export default App;

Ausgabe:

React komponente div ziehbar mit schönem dnd

Zum Booten erstellen wir zunächst ein Array von Namen, die wir ziehen und neu anordnen müssen. Dann verwenden wir die Splice-Methode, so dass, sobald wir einen Gegenstand aus seiner Position nehmen, er automatisch durch den nächsten Gegenstand ersetzt wird.

Als Nächstes erstellen wir die Funktionen für das Ziehen und Ablegen von Elementen. Nachdem wir die Funktionen zum Ziehen der Komponenten erstellt haben, packen wir alle diese Funktionen in die <Draggable></Draggable>-Tags.

Wir erstellen die Funktion zum Ablegen von Elementen und packen sie ein, einschließlich der Funktionen im dragable-Tag in <Droppable></Droppable>, dann packen wir all diese in <DragDropContext></DragDropContext> Schild.

Fazit

Die Flexibilität von React macht fast jedes Projekt möglich und einfach zu erstellen. Die React Drag-Funktion ist nützlich, um Spiele und benutzerfreundliche Apps für Benutzer zu erstellen.

Autor: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

Verwandter Artikel - React Component