Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.

¿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 reordenar una lista de elementos o mover elementos de una lista a otra.

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. Comienza por creando una aplicación React, luego elija su método preferido.

Método 1: uso de funciones integradas

En React, puede usar el evento onDrag para rastrear cuando el usuario está arrastrando un elemento, y el evento onDrop para rastrear cuando lo suelta. También puede usar los eventos onDragStart y onDragEnd para rastrear cuándo comienza y se detiene el arrastre.

instagram viewer

Para hacer que un elemento se pueda arrastrar, puede establecer el atributo arrastrable en verdadero. Por ejemplo:

importar Reaccionar, {Componente} de 'reaccionar';
clasemicomponenteextiendeComponente{
 prestar() {
devolver (
<división
 arrastrable
 onDragStart={este.handleDragStart}
 onDrag={este.handleDrag}
 onDragEnd={este.handleDragEnd}
>
 ¡Arrástrame!
</div>
 );
 }
}
exportarpor defecto MiComponente;

Para hacer que un elemento se pueda soltar, puede crear los métodos handleDragStart, handleDrag y handleDragEnd. Estos métodos se ejecutarán cuando un usuario arrastre el elemento y cuando lo suelte. Por ejemplo:

importar Reaccionar, {Componente} de 'reaccionar';
clasemicomponenteextiendeComponente{
 handleDragStart (evento) {
// Este método se ejecuta cuando comienza el arrastre
 consola.log("Comenzó")
 }


handleDrag (evento) {
// Este método se ejecuta cuando se arrastra el componente
 consola.log("Arrastrando...")
 }


handleDragEnd (evento) {
// Este método se ejecuta cuando se detiene el arrastre
 consola.log("Terminado")
 }


prestar() {
devolver (
<división
 arrastrable
 onDragStart={este.handleDragStart}
 onDrag={este.handleDrag}
 onDragEnd={este.handleDragEnd}
>
 ¡Arrástrame!
</div>
 );
 }
}
exportarpor defecto MiComponente;

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 ejecutará primero. Aquí es donde puede hacer cualquier configuración que necesite hacer, como configurar los datos para transferir.

Luego, el método handleDrag se ejecuta repetidamente mientras arrastra el elemento. Aquí es donde puede realizar cualquier actualización, como ajustar la posición del elemento.

Finalmente, cuando suelta el elemento, se ejecuta el método handleDragEnd. Aquí es donde puede realizar cualquier limpieza que necesite, 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 componente. Por ejemplo:

importar Reaccionar, {Componente, useState} de 'reaccionar';
funciónmicomponente() {
constante [x, establecerX] = usarEstado(0);
constante [y, establecerY] = usarEstado(0);


constante handleDragEnd = (evento) => {
establecerX(evento.clienteX);
poner Y(evento.clienteY);
 };


devolver (
<división
 arrastrable
 onDragEnd={manejarDragEnd}
 estilo={{
 posición: "absoluto",
 izquierda: x,
 arriba: y
 }}
>
 ¡Arrástrame!
</div>
 );
}
exportarpor defecto MiComponente;

El código llama al gancho useState para rastrear la posición x e y del componente. Luego, en 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 usando npm:

npm instalar reaccionar-arrastrar-y-gota--ahorrar

Luego, puede usarlo en sus componentes React:

importar Reaccionar, {Componente} de 'reaccionar';
importar { Arrastrable, Soltable } de 'reaccionar-arrastrar y soltar';
clasemicomponenteextiendeComponente{
 prestar() {
devolver (
<división>
<Tipo arrastrable ="Foo" datos="bar">
<división>¡Arrástrame!</div>
</Draggable>


<Tipos descartables={['Foo']} onDrop={this.handleDrop}>
<división>¡Caer aquí!</div>
</Droppable>
</div>
 );
 }


handleDrop (datos, evento) {
// Este método se ejecuta cuando los datos caen
consola.Dato de registro); // 'bar'
 }
}
exportarpor defecto MiComponente;

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 pueda arrastrar y un elemento que se pueda soltar.

El componente Draggable acepta una propiedad de tipo, que especifica el tipo de datos que representa 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 realizar un seguimiento de qué componente es cuál en una interfaz de varios componentes.

El componente Droppable utiliza una propiedad de tipos 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 coloque un componente en él.

Cuando suelte el componente que se puede arrastrar en el que se puede soltar, se ejecutará el método handleDrop. Aquí es donde puede hacer cualquier procesamiento que necesite 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, podría cambiar la opacidad del elemento o agregar un borde. Para agregar efectos visuales puedes usar CSS normal o Tailwind CSS en su aplicación React.

En segundo lugar, debe asegurarse de que sus usuarios solo puedan arrastrar el elemento a un destino de colocación válido. Por ejemplo, podría agregar el tipos atributo al elemento, que especifica los tipos de componente que aceptará.

En tercer lugar, debe proporcionar una forma para que el usuario cancele la operación de arrastrar y soltar. Por ejemplo, podría agregar un botón que le permita al usuario cancelar la operación.

Mejore la experiencia del usuario con 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 reorganizar fácilmente el orden de 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 la función de arrastrar y soltar sea más interactiva y fácil de usar.