¿Alguna vez ha querido agregar la funcionalidad de arrastrar y soltar a sus componentes de React? No es tan difícil como crees.
Arrastrar y soltar es una forma de mover o manipular elementos en una pantalla usando un mouse o un panel táctil. Es perfecto para reorganizar una lista de elementos o mover elementos de una lista a otra.
Puede crear componentes de arrastrar y soltar en React utilizando dos métodos: funciones integradas o un módulo de terceros.
Diferentes formas de implementar arrastrar y soltar en React
Hay dos formas de implementar arrastrar y soltar en React: usando las funciones integradas de React o usando un módulo de terceros. Comience creando una aplicación React y luego elija el método que desee.
Método 1: uso de funciones integradas
En React, puede usar el evento onDrag para rastrear cuándo el usuario arrastra un elemento y el evento onDrop para rastrear cuándo lo suelta. También puede usar los eventos onDragStart y onDragEnd para rastrear cuándo comienza y se detiene el arrastre.
Para hacer que un elemento se pueda arrastrar, puede establecer el atributo arrastrable en verdadero. Por ejemplo:
import React, { Component } from 'react';class MyComponent extends Component {
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent;
Para hacer que un elemento se pueda soltar, puede crear los métodos handleDragStart, handleDrag y handleDragEnd. Estos métodos se ejecutan cuando un usuario arrastra y suelta el elemento. Por ejemplo:
import React, { Component } from 'react';class MyComponent extends Component {
handleDragStart(event) {
console.log("Started")
}
handleDrag(event) {
console.log("Dragging...")
}
handleDragEnd(event) {
console.log("Ended")
}
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent;
En el código anterior, hay tres métodos para controlar el arrastre de un elemento: handleDragStart, handleDrag y handleDragEnd. El div tiene un atributo que se puede arrastrar y establece las propiedades onDragStart, onDrag y onDragEnd en sus funciones correspondientes.
Cuando arrastra el elemento, el método handleDragStart se ejecuta primero. Aquí puede hacer todas las configuraciones que necesita hacer, como configurar los datos que se transferirán.
Luego, el método handleDrag se ejecuta repetidamente a medida que arrastra el elemento. Aquí puede realizar actualizaciones, como ajustar la posición del elemento.
Finalmente, cuando suelta el elemento, se ejecuta el método handleDragEnd. Aquí puede realizar cualquier limpieza que necesite hacer, como restablecer los datos que transfirió.
También puede mover el componente por la pantalla en onDragEnd(). Para hacer esto, debe establecer la propiedad de estilo del componente. Por ejemplo:
import React, { Component, useState } from 'react';function MyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const handleDragEnd = (event) => {
setX(event.clientX);
setY(event.clientY);
};
return (
<div
draggable
onDragEnd={handleDragEnd}
style={{
position: "absolute",
left: x,
top: y
}}
>
Drag me!
</div>
);
}
export default MyComponent;
El código llama al gancho useState para rastrear las posiciones x e y del componente. Luego, el método handleDragEnd actualiza la posición x e y. Finalmente, puede establecer la propiedad de estilo del componente para colocarlo en las nuevas posiciones x e y.
Método 2: usar un módulo de terceros
Si no desea utilizar las funciones integradas de React, puede utilizar un módulo de terceros como: reaccionar-arrastrar y soltar. Este módulo proporciona un contenedor específico de React alrededor de la API de arrastrar y soltar de HTML5.
Para usar este módulo, primero debe instalarlo con npm:
npm install react-drag-and-drop Luego puede usarlo en sus componentes React:
import React, { Component } from 'react';
import { Draggable, Droppable } from 'react-drag-and-drop';class MyComponent extends Component {
render() {
return (
<div>
<Draggable type="foo" data="bar">
<div>Drag me!</div>
</Draggable>
<Droppable types={['foo']} onDrop={this.handleDrop}>
<div>Drop here!</div>
</Droppable>
</div>
);
}
handleDrop(data, event) {
console.log(data);
}
}
export default MyComponent;
Comience importando los componentes Draggable y Droppable desde el módulo react-drag-and-drop. Luego use estos componentes para crear un elemento que se puede arrastrar y un elemento que se puede soltar.
El componente Draggable acepta un tipo de propiedad, que especifica el tipo de datos que representa la parte, y una propiedad de datos, que especifica los datos que se transferirán. Tenga en cuenta que el tipo es un nombre personalizado que puede elegir para realizar un seguimiento de qué componente es cuál en una interfaz de varios componentes.
El componente Droppable utiliza una propiedad de tipo para especificar los tipos de datos que puede colocar en él. También tiene un accesorio onDrop, que especifica la función de devolución de llamada que se ejecutará cuando sueltes una pieza en él.
Cuando suelta el componente que se puede arrastrar en el que se puede soltar, se ejecuta el método handleDrop. Aquí podrá realizar todos los tratamientos que tenga que hacer con los datos.
Sugerencias para crear componentes DnD fáciles de usar
Hay algunas cosas que puede hacer para que sus componentes de arrastrar y soltar sean más fáciles de usar.
Primero, debe proporcionar comentarios visuales cuando se arrastra un elemento. Por ejemplo, puede cambiar la opacidad del elemento o agregar un borde. Para agregar efectos visuales, puede usar CSS normal o CSS de viento de cola en su aplicación React.
En segundo lugar, asegúrese de que sus usuarios solo puedan arrastrar el elemento a un destino de colocación válido. Por ejemplo, puede agregar el tipos atributo al elemento, que especifica los tipos de componentes que aceptará.
En tercer lugar, debe proporcionar al usuario una forma de cancelar el arrastrar y soltar. Por ejemplo, puede agregar un botón que le permita al usuario cancelar la operación.
Mejore la experiencia del usuario de arrastrar y soltar
La función de arrastrar y soltar no solo ayuda a mejorar la experiencia del usuario, sino que también puede ayudar con el rendimiento general de su aplicación web. Un usuario ahora puede cambiar fácilmente el orden de algunos datos sin actualizar la página o pasar por varios pasos.
También puede agregar otras animaciones a su aplicación React para que la función de arrastrar y soltar sea más interactiva y fácil de usar.