¿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 la pantalla usando un mouse o un panel táctil. Es ideal para reorganizar una lista de elementos o mover elementos de una lista a otra. Verificar Cómo crear ReactOS Live en un disco USB o CD.
Puede crear componentes de arrastrar y soltar en React utilizando cualquiera de los 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 su aplicación React, luego elija su método preferido.
Método XNUMX: utilice las funciones integradas
En React, puede usar el evento onDrag para rastrear cuando un usuario arrastra un elemento, y hay un evento onDrop para rastrear cuando se ha soltado. También puede usar los eventos onDragStart y onDragEnd para rastrear cuándo comienza y se detiene un 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 funcionarán cuando el usuario arrastre y suelte el elemento. Por ejemplo:
import React, { Component } from ‘react’;
class MyComponent extends Component {
handleDragStart(event) {
// This method runs when the dragging starts
console.log(“Started”)
}
handleDrag(event) {
// This method runs when the component is being dragged
console.log(“Dragging…”)
}
handleDragEnd(event) {
// This method runs when the dragging stops
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 formas de 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 se arrastra el elemento, el método handleDragStart se activará primero. Aquí es donde puede hacer cualquier configuración que necesite, como preparar los datos para transferir.
Luego, el método handleDrag se activa recursivamente mientras se arrastra el elemento. Aquí es donde puede realizar cualquier actualización, como ajustar la posición del elemento.
Finalmente, cuando se suelta el elemento, se activa el método handleDragEnd. Aquí es donde 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, deberá establecer la propiedad de estilo del complemento. 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 enlace useState para realizar un seguimiento de las ubicaciones x e y del componente. Luego, en el método handleDragEnd, actualiza las posiciones x e y. Finalmente, puede establecer la propiedad de estilo del componente para colocarlo en las nuevas posiciones x e y. Verificar Las mejores aplicaciones Blockchain creadas con React Native.
Método 2: use un módulo de terceros
Si no desea utilizar las funciones integradas de React, puede utilizar un módulo de terceros como reaccionar y 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 usando npm:
npm install react-drag-and-drop — save
Luego, puede usarlos 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) {
// This method runs when the data drops
console.log(data); // ‘bar’
}
}
export default MyComponent; Comience importando los componentes Draggable y Droppable desde el módulo de arrastrar y soltar de React. Luego, use estos componentes para crear un elemento que se puede arrastrar y un elemento que se puede soltar.
Un componente que se puede arrastrar acepta una propiedad de tipo, que especifica el tipo de datos representado por el componente, 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 rastrear cualquier componente en una interfaz de varios componentes.
El componente Droppable usa la propiedad de tipos para especificar los tipos de datos en los que puede colocarlos. También tiene una propiedad onDrop, que especifica la función de devolución de llamada que se activará cuando se suelte un componente.
Cuando suelte el componente que se puede arrastrar en el disco que se puede soltar, se activará el método handleDrop. Aquí es donde puede hacer cualquier manipulación que necesite hacer con los datos.
Sugerencias para crear componentes DnD fáciles de usar
Hay algunas cosas que puede hacer para que los componentes de arrastrar y soltar sean más fáciles de usar.
En primer lugar, se debe proporcionar una retroalimentación visual cuando se presta un artículo. Por ejemplo, puede cambiar la opacidad de un elemento o agregar un borde. Para agregar efectos visuales, puede usar CSS regular o Tailwind CSS en su aplicación React.
En segundo lugar, debe asegurarse de que los usuarios solo puedan arrastrar el elemento a un destino de colocación válido. Por ejemplo, puede agregar el atributo de tipos al elemento, que especifica los tipos de componentes que aceptará.
En tercer lugar, se debe proporcionar un método para que el usuario cancele la operación de arrastrar y soltar. Por ejemplo, puede agregar un botón que le permita al usuario cancelar la operación. Verificar Las mejores herramientas gratuitas para crear y desarrollar juegos sin experiencia en programación.
Experiencia de usuario mejorada con arrastrar y soltar
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. El usuario ahora puede reorganizar fácilmente algunos datos sin tener que actualizar la página o seguir varios pasos.
También puede agregar otras animaciones en su aplicación React para que arrastrar y soltar sea más interactivo y fácil de usar. Puedes ver ahora Cómo configurar el ratón para usarlo cómodamente.
