Hacer React Component/Div Arrastrable
-
Hacer React Component/Div Arrastrable con
onMouse - Hacer que React Component/Div se pueda arrastrar usando la dependencia React-Draggable
- Hacer React Component/Div Arrastrable con Beautiful DnD
- Conclusión
Ahora es divertido ser un creador de sitios web o tal vez elegir la creación de sitios web como un pasatiempo. Puede crear un sitio web simplemente usando su mouse para elegir los contenidos y organizarlos, como un rompecabezas.
Cuando creamos contenidos o aplicaciones que permiten a los usuarios arrastrar y soltar elementos fácilmente, hace que la aplicación sea fácil de usar, incluso para los novatos, lo que podría generar una amplia aceptación de la aplicación en el mercado.
Cuando creamos aplicaciones o juegos en React, la capacidad de arrastrar y soltar contenido hace que sea fácil y rápido completar estas tareas, incluso las más complejas.
Veamos ejemplos que nos ayudarán a aprender cómo hacer que un componente se pueda arrastrar.
Hacer React Component/Div Arrastrable con onMouse
La función arrastrable de React utiliza toneladas de detectores de eventos, pero este ejemplo utilizará tres: onMouseDown, onMouseMove y onMouseUp.
Comenzamos creando un nuevo proyecto React. Abrimos nuestra terminal en VS Code y escribimos npx create-react-app dragone.
Luego navegamos a la carpeta dragone y creamos dos carpetas. La primera carpeta se llamará Main, y dentro de ella crearemos los archivos MainApp.js y MainApp.css.
Estos archivos contendrán los códigos para la página de inicio.
La segunda carpeta se llamará Componentes, y en su interior habrá dos archivos, Dialog.js y Dialog.css. Estos serán los componentes que queremos arrastrar por la pantalla de nuestro navegador.
Dentro de MainApp.js, ingresaremos estos códigos:
Fragmento de código (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>
);
}
}
En esta página, una vez que se hace clic en el botón Mostrar diálogo, se activa el detector de eventos onClick, y aparece el componente que deseamos arrastrar.
El MainApp.css contiene los estilos que embellecen la página:
Fragmento de código (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;
}
Pasamos a la mejor parte de este ejemplo, donde creamos el componente arrastrable. Nos dirigimos a Dialog.js, y hacemos un poco de codificación:
Fragmento de código (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>
);
}
}
Definimos los estados que queremos que tenga el componente en cada situación. En el estado predeterminado, el componente no se mueve a ninguna parte y configuramos el arrastre en false.
Luego enlazamos los tres estados en los que estará el componente, es decir, dragStart, dragging, y dragEnd, y asignamos cada uno a los escuchadores de eventos onMouse que correspondan. El onMouseDown se activa una vez que el ratón se coloca en el componente, entonces la función asignada a _dragStart se pone a trabajar.
El onMouseMove indica que el componente está siendo arrastrado, lo que activa la función asignada a _dragging.
Por último, onMouseUp indica que el ratón ya no está colocado sobre el componente. Esto activa la función vinculada a _dragEnd.
El Dialog.css es donde se realiza el código para diseñar el componente arrastrable:
Fragmento de código (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;
}
Luego importamos MainApp en App.js así:
Fragmento de código (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;
Producción:
Hacer que React Component/Div se pueda arrastrar usando la dependencia React-Draggable
También podemos hacer que un componente se pueda arrastrar utilizando la dependencia de react. Después de haber creado el nuevo proyecto con npx create-react-app dragtwo.
Navegamos hasta la carpeta dragtwo para instalar la dependencia. En nuestra terminal, escribimos npm install react-draggable.
Luego iremos a App.js para hacer un poco de codificación:
Fragmento de código (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;
Producción:
Primero, importamos Draggable desde react-draggable. Luego creamos el componente que será arrastrable.
Luego envolvemos este componente dentro de la etiqueta <Draggable></Draggable>.
Hacer React Component/Div Arrastrable con Beautiful DnD
La dependencia Beautiful DnD de React es otra biblioteca sencilla y fácil de usar que se puede utilizar para hacer que los componentes se puedan arrastrar.
Para arrancar, primero creamos nuestro componente de reacción, luego navegamos a la carpeta del proyecto para instalar la dependencia con: install react-beautiful-dnd --save.
A continuación, abrimos el archivo App.js y escribimos estos códigos:
Fragmento de código (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;
Producción:
Para arrancar, primero creamos una matriz de nombres que debemos arrastrar y reordenar. Luego utilizamos el método de empalme, de modo que una vez que sacamos un elemento de su posición, se reemplaza automáticamente por el siguiente elemento.
A continuación, creamos las funciones para manejar el arrastrar y soltar elementos. Después de crear las funciones para arrastrar los componentes, envolvemos todas estas funciones dentro de las etiquetas <Draggable></Draggable>.
Creamos la función para soltar elementos y la envolvemos, incluidas las funciones en la etiqueta draggable dentro de <Droppable></Droppable>, luego envolvemos todo esto dentro de la etiqueta <DragDropContext></DragDropContext>.
Conclusión
La flexibilidad de React hace que casi todos los proyectos sean posibles y sencillos de crear. La funcionalidad de arrastre de React es útil para crear juegos y aplicaciones fáciles de usar para los usuarios.
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