React es una famosa biblioteca JavaScript de interfaz de usuario (UI). Puede usar la biblioteca React para crear diferentes tipos de aplicaciones web que van desde aplicaciones de redes sociales, plataformas de comercio electrónico, blogs, aplicaciones de una sola página, sistemas de administración de contenido (CMS), paneles y visualizaciones de datos, por mencionar algunos.
Los desarrolladores pueden ampliar la funcionalidad de las aplicaciones React utilizando varias bibliotecas y marcos. Estas bibliotecas se pueden agrupar en diferentes clases; Arrastrar y soltar es una categoría de biblioteca bastante popular.
La funcionalidad de arrastrar y soltar es una interacción de la interfaz de usuario que permite al usuario hacer clic o elegir un elemento en la pantalla, arrastrarlo y soltarlo en otro componente. Un ejemplo perfecto de esta funcionalidad es reorganizar elementos en una lista arrastrándolos y soltándolos en la ubicación deseada.
También puede usar la funcionalidad de arrastrar y soltar en los siguientes casos;
- Carga de archivos: los usuarios pueden arrastrar y soltar archivos en lugar de desplazarse por sus máquinas para seleccionar y cargar archivos.
- Tableros Kanban: puede crear un tablero donde los usuarios pueden arrastrar y soltar elementos según los niveles o etapas de actividad.
- Galerías de imágenes: puede tener una galería de imágenes donde los usuarios pueden cargar y reorganizar imágenes.
- Widgets: los usuarios pueden personalizar la apariencia de la aplicación arrastrando y soltando widgets.
- Carrito de compras: los usuarios pueden hacer clic en un artículo, arrastrarlo y soltarlo en el carrito.
Una biblioteca React Drag and Drop es un conjunto de componentes preconstruidos que permiten a los desarrolladores implementar la funcionalidad Drag and Drop en las aplicaciones React.
Estas bibliotecas vienen con componentes reutilizables, lo que permite a los desarrolladores crear elementos que se pueden arrastrar y soltar. Las bibliotecas manejan diferentes eventos, como arrastrar inicio, arrastrar entrar, arrastrar salir y soltar.
Tabla de contenido
Cómo las bibliotecas de arrastrar y soltar ayudarán a mejorar las interacciones de la interfaz de usuario
- Experiencia de usuario mejorada: la funcionalidad de arrastrar y soltar es un enfoque intuitivo para que los usuarios interactúen con una aplicación. La opción de arrastrar y soltar elementos en lugar de ingresarlos manualmente proporciona una interacción interactiva y fluida.
- Flujos de trabajo simplificados: en lugar de cargar archivos desde diferentes ubicaciones de su computadora a una aplicación, simplemente puede arrastrarlos y soltarlos.
- Mayor productividad: la funcionalidad de arrastrar y soltar ahorra tiempo y hace que los usuarios sean más productivos.
- Adecuado para dispositivos móviles: Los dispositivos móviles como teléfonos inteligentes y tabletas tienen un espacio de pantalla limitado. Los usuarios confían principalmente en los gestos para la navegación, lo que hace que arrastrar y soltar sea una adición increíble.
- Proporciona interfaces atractivas: la funcionalidad de arrastrar y soltar puede agregar un atractivo visual a la interfaz de usuario de su aplicación. Puede agregar animaciones que brinden comentarios o describan acciones a medida que los usuarios arrastran y sueltan elementos en la aplicación.
Estas son las mejores bibliotecas de Drag and Drop React:
Reaccionar DnD
React DnD es un conjunto de utilidades de React para crear interfaces complejas de arrastrar y soltar. Esta biblioteca es perfecta para crear aplicaciones similares a Trello y Storify, donde la funcionalidad de arrastrar y soltar también implica la transferencia de datos.
Instalación;
npm instalar reaccionar-dnd reaccionar-dnd-html5-backend
Puede importar React DnD a su componente React como;
import { useDrag } from 'react-dnd'
Características clave
- Funciona con sus componentes: esta biblioteca no proporciona widgets listos para usar. Sin embargo, envuelve sus componentes e inyecta accesorios en ellos.
- Extensible: puede agregar un backend personalizado basado en eventos del mouse o eventos táctiles cuando usa la biblioteca React DnD.
- Comprobable: puede usar Jest o Enzyme para probar el código React DnD.
- Soporte táctil: el backend táctil React DnD agrega funcionalidad táctil a esta biblioteca.
React DnD es una biblioteca gratuita de código abierto.
Reaccionar arrastrable
React Draggable es una biblioteca React simple pero poderosa que facilita la creación de elementos que se pueden arrastrar.
Instalación;
npm install reaccionar arrastrable
Para usar React Draggable, importe de la siguiente manera en su componente React.
import Draggable from 'react-draggable';
Características
- Fácil de instalar y configurar: solo necesita instalar e importar la biblioteca para comenzar. También puede importar componentes individuales de la biblioteca.
- Compatible con Vanilla JavaScript y React: puede usar React Draggable con JavaScript simple de la siguiente manera;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Compatible con otras bibliotecas de React: puede usar React Draggable con otras bibliotecas, como React Grid Layout.
React Draggable es una biblioteca gratuita de Drap and Drop React de código abierto.
Reaccionar Dropzone
React Dropzone es un React Hook simple para crear una zona de arrastrar y soltar compatible con HTML-5 para archivos.
Instalación;
npm install –save react-dropzone
o:
agregar hilo reaccionar-dropzone
Luego puede importar esta biblioteca de la siguiente manera;
import {useDropzone} from 'react-dropzone';
Características
- Estilo Dropzone: esta biblioteca no establece ninguna regla de estilo y, por lo tanto, puede diseñar sus componentes como mejor le parezca.
- Permite a los usuarios definir tipos de archivos aceptables: puede indicar a Dropzone que acepte o rechace ciertos tipos de archivos al proporcionar aceptar prop.
- Acepta validación personalizada: el accesorio de validación le permite especificar una validación personalizada para diferentes archivos.
React Dropzone es una biblioteca React Drag and Drop gratuita y de código abierto.
Diseño de cuadrícula de reacción
React Grid Layout es un diseño de cuadrícula redimensionable y arrastrable para React.
Instalación;
npm install react-grid-layout
Puede importar esta biblioteca de la siguiente manera;
import GridLayout from "react-grid-layout";
Características
- Libre de dependencias: React Grid Layout se basa únicamente en React y no tiene JQuery.
- Widgets redimensionables: además de la función de arrastrar y soltar, también puede cambiar el tamaño de los componentes.
- Puntos de interrupción receptivos: la biblioteca proporciona un diseño separado para cada punto de interrupción.
- Personalizable: puede agregar o eliminar widgets sin reconstruir toda la cuadrícula.
React Grid Layout es una biblioteca React gratuita y de código abierto.
reaccionar rnd
React rnd es un componente que se puede arrastrar y cambiar de tamaño para React.
Instalación;
npm i -S reaccionar-rnd
O
añadir hilo reaccionar-rnd
Características
- Simple: React rnd está diseñado para ser simple pero muy poderoso.
- Compatible con TypeScript y JavaScript: puede usar React rnd con su aplicación, independientemente de si la ha configurado con JavaScript o TypeScript.
- Admite el cambio de tamaño: puede cambiar fácilmente el tamaño de los componentes creados con React rnd para satisfacer sus necesidades.
React rnd es una biblioteca React gratuita y de código abierto.
Reaccionar dnd virtualizado
React Virtualized dnd es un marco React de arrastrar y soltar que presenta barras de desplazamiento de virtualización incorporadas.
Instalación;
npm install –save reaccionar-virtualizado-dnd
Puede importar React Virtualized dnd como;
import ExampleBoard from 'react-virtualized-dnd';
Características
- Variedad de componentes a elegir: Los componentes se agrupan en “Altura Fija”, “Altura Variable” y “Droppables Agrupables”.
- Personalizable: puede personalizar los componentes de React Virtualized dnd para satisfacer sus necesidades.
React Virtualized dnd es un marco React de código abierto cuyo código fuente está alojado en GitHub.
reaccionar móvil
React Movable es una biblioteca React de arrastrar y soltar para listas y tablas.
Instalación;
añadir hilo reaccionar móvil
Puede importar esta biblioteca como;
import { List, arrayMove } from 'react-movable';
Características
- Varias opciones de arrastrar y soltar para elegir: la biblioteca tiene códigos repetitivos para diferentes tipos de componentes de arrastrar y soltar para elegir.
- Biblioteca ligera: React Movable no tiene dependencias como JQuery. Tiene menos de 4kB (comprimido con gzip).
- Estilo sin opinión: React Movable no controla cómo puede desear diseñar su aplicación.
- Soporte táctil: esta biblioteca ayuda a crear aplicaciones que se pueden usar en teléfonos inteligentes, tabletas y cualquier dispositivo con funcionalidad táctil.
- Escrito en TypeScript: puede introducir tipos en su código, una funcionalidad que no está disponible en JavaScript.
React Movable es una biblioteca React gratuita y de código abierto.
Arrastrable
Draggable es una biblioteca React de arrastrar y soltar que permite a los desarrolladores crear eventos de arrastrar y soltar al abstraer los eventos nativos del navegador en una API completa.
Instalación;
npm install @shopify/arrastrable –guardar
o a través de hilo:
añadir hilo @shopify/arrastrable
Puede importar Draggable a su aplicación React como;
import { Draggable } from '@shopify/draggable';
Características
- Componentes categorizados: Encontrar el componente exacto a utilizar es fácil ya que los componentes están categorizados. Estos componentes son personalizables.
- Compatible con los principales navegadores: puede usar Draggable con navegadores como Google Chrome, Mozilla Firefox y Apple Safari.
- Admite TypeScript: al trabajar con esta biblioteca, puede agregar definiciones de TypeScript a su código.
- Admite complementos: puede agregar a la funcionalidad de Draggable con complementos como Colidable y SwapAnimation.
Draggable es una biblioteca React gratuita y de código abierto mantenida por colaboradores.
Reaccionar Arrastrar para seleccionar
React arrastrar para seleccionar es una biblioteca de React que puede usar para agregar la funcionalidad de arrastrar para seleccionar a su aplicación.
Instalación;
npm install –save @air/react-drag-to-select
O
añadir hilo @air/react-drag-to-select
Puede importar esta biblioteca a su aplicación de la siguiente manera;
import { useSelectionContainer } from '@air/react-drag-to-select'
Características
- Simple: esta biblioteca no selecciona elementos. Sin embargo, la biblioteca dibuja el cuadro de selección y le proporciona las coordenadas.
- Admite TypeScript: la biblioteca React Drag-to-select está escrita en TypeScript, lo que significa que puede usarla con aplicaciones React escritas en TypeScript y JavaScript.
- Admite pruebas: puede usar esta biblioteca con la mayoría de los marcos de prueba de React.
React Drag-to-select es una biblioteca gratuita de código abierto.
Reaccionar Dragula
React Dragula es una biblioteca React simple de arrastrar y soltar.
Instalación;
npm install reaccionar-dragula -guardar
O,
glorieta instalar reaccionar-dragula -guardar
Características
- Personalizable: puede personalizar los componentes de React Dragula para satisfacer sus necesidades.
- Admite toque: puede usar esta biblioteca para crear aplicaciones que se pueden usar en teléfonos inteligentes, tabletas y otros dispositivos táctiles.
- Ligero: React Dragula tiene un tamaño de paquete pequeño, lo que lo hace perfecto si desea que su aplicación React sea pequeña.
React Dragula es una biblioteca gratuita de código abierto.
Conclusión
Ahora tiene una variedad de bibliotecas de arrastrar y soltar que puede usar en su próxima aplicación React. La elección de la biblioteca dependerá de las funciones que pretenda tener en su próxima aplicación, gustos y preferencias.
Si su aplicación es grande, puede usar múltiples bibliotecas de arrastrar y soltar para satisfacer diferentes necesidades. La mayoría de estas bibliotecas son compatibles con varias bibliotecas de prueba de React, lo que facilita el envío de aplicaciones sin errores.