Rendre React Component/Div Draggable

  2. HowTo
  3. React Howtos
  4. Rendre React Component/Div Draggable
Oluwafisayo Oluwatayo 15 février 2024
React React Component
  1. Rendre React Component/Div Draggable avec onMouse
  2. Rendre React Component/Div Draggable à l’aide de la dépendance React-Draggable
  3. Rendre React Component/Div Draggable avec Beautiful DnD
  4. Conclusion
Rendre React Component/Div Draggable

Il est maintenant amusant d’être un constructeur de sites Web ou peut-être de choisir la création de sites Web comme passe-temps. Vous pouvez créer un site Web simplement en utilisant votre souris pour sélectionner le contenu et les organiser, comme un puzzle.

Lorsque nous créons des contenus ou des applications qui permettent aux utilisateurs de glisser-déposer facilement des éléments, cela rend l’application facile à utiliser, même pour les novices, ce qui pourrait conduire à une large acceptation de l’application sur le marché.

Lorsque nous créons des applications ou des jeux dans React, la possibilité de glisser-déposer du contenu facilite et accélère la réalisation de ces tâches, même les plus complexes.

Examinons des exemples qui nous aideront à apprendre comment rendre un composant déplaçable.

Rendre React Component/Div Draggable avec onMouse

La fonction déplaçable de React utilise des tonnes d’écouteurs d’événements, mais cet exemple en utilisera trois : onMouseDown, onMouseMove et onMouseUp.

Nous commençons par créer un nouveau projet React. Nous ouvrons notre terminal dans VS Code et tapons npx create-react-app dragone.

Ensuite, nous naviguons vers le dossier dragone et créons deux dossiers. Le premier dossier sera nommé Main, et à l’intérieur de celui-ci, nous créerons les fichiers MainApp.js et MainApp.css.

Ces fichiers contiendront les codes de la page d’accueil.

Le second dossier sera nommé Components, et à l’intérieur il y aura deux fichiers, Dialog.js et Dialog.css. Ce seront les composants que nous voulons faire glisser sur l’écran de notre navigateur.

À l’intérieur de MainApp.js, nous allons saisir ces codes :

Extrait de code (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>
        );
    }
}

Sur cette page, une fois que le bouton Afficher la boîte de dialogue est cliqué, l’écouteur d’événement onClick est activé, et il fait apparaître le composant que nous souhaitons faire glisser.

Le MainApp.css contient les styles qui embellissent la page :

Extrait de code (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;
}

Nous passons à la meilleure partie de cet exemple, où nous créons le composant déplaçable. Nous nous dirigeons vers le Dialog.js, et nous faisons du codage :

Extrait de code (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>
        );
    }
}

Nous définissons les états que nous voulons que le composant soit dans chaque situation. À l’état par défaut, le composant ne se déplace nulle part et nous définissons le glissement sur false.

Ensuite, nous lions les trois états dans lesquels les composants seront, c’est-à-dire dragStart, dragging et dragEnd, et nous attribuons chacun aux écouteurs d’événement onMouse qui correspondent. Le onMouseDown s’active une fois la souris posée sur le composant, puis la fonction affectée à _dragStart se met au travail.

Le onMouseMove indique que le composant est en train d’être glissé, ce qui active la fonction attribuée à _dragging.

Enfin, onMouseUp indique que la souris n’est plus posée sur le composant. Ceci active la fonction liée à _dragEnd.

Le Dialog.css est l’endroit où le code pour styliser le composant déplaçable est fait :

Extrait de code (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;
}

Ensuite, nous importons MainApp dans le App.js comme ceci :

Extrait de code (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;

Production:

React composant div déplaçable avec onMouse

Rendre React Component/Div Draggable à l’aide de la dépendance React-Draggable

Nous pouvons également rendre un composant déplaçable en utilisant la dépendance de react. Après avoir créé le nouveau projet avec npx create-react-app dragtwo.

Nous naviguons vers le dossier dragtwo pour installer la dépendance. Dans notre terminal, on tape npm install react-draggable.

Ensuite nous irons sur App.js pour faire un peu de codage :

Extrait de code (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;

Production:

composant de réaction div déplaçable à l&rsquo;aide de la dépendance de réaction-déplaçable

Tout d’abord, nous importons Draggable de react-draggable. Ensuite, nous créons le composant qui sera déplaçable.

Nous enveloppons ensuite ce composant dans la balise <Draggable></Draggable>.

Rendre React Component/Div Draggable avec Beautiful DnD

La dépendance Beautiful DnD de React est une autre bibliothèque simple et facile à utiliser qui peut être utilisée pour rendre les composants déplaçables.

Pour démarrer, nous créons d’abord notre composant de réaction, puis nous naviguons vers le dossier du projet pour installer la dépendance avec : install react-beautiful-dnd --save.

Ensuite, nous ouvrons le fichier App.js et tapons ces codes :

Extrait de code (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;

Production:

React composant div déplaçable avec un beau dnd

Pour démarrer, nous créons d’abord un tableau de noms que nous devons faire glisser et réorganiser. Ensuite, nous utilisons la méthode d’épissage, de sorte qu’une fois que nous retirons un élément de sa position, il est automatiquement remplacé par l’élément suivant.

Ensuite, nous créons les fonctions pour gérer le glisser-déposer des éléments. Après avoir créé les fonctions pour faire glisser les composants, nous enveloppons toutes ces fonctions dans les balises <Draggable></Draggable>.

Nous créons la fonction pour déposer des éléments, et nous l’enveloppons, y compris les fonctions dans la balise draggable à l’intérieur du <Droppable></Droppable>, puis nous enveloppons le tout dans le <DragDropContext></DragDropContext> étiquette.

Conclusion

La flexibilité de React rend presque tous les projets possibles et simples à créer. La fonctionnalité React drag est utile pour créer des jeux et des applications faciles à utiliser pour les utilisateurs.

Auteur: 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

Article connexe - React Component