14 bibliotecas gratuitas de arrastrar y soltar para JavaScript, React y Swift

Arrastrar y soltar HTML5 es una funcionalidad incorporada proporcionada por HTML5 que permite a los usuarios tomar un objeto y arrastrarlo a una ubicación diferente dentro de la aplicación.

Si bien proporciona funcionalidades básicas de arrastrar y soltar, su implementación puede ser compleja y carece de algunas funciones avanzadas.

Por otro lado, las bibliotecas de arrastrar y soltar de JavaScript proporcionan una API más simplificada y fácil de usar para implementar la misma funcionalidad. Estas bibliotecas a menudo vienen con características adicionales como soporte para archivos y directorios, excelente compatibilidad con el navegador y estilo sencillo.

También permiten escenarios de arrastrar y soltar más complejos, como arrastrar varios elementos a la vez e integrarlos con otros marcos de JavaScript.

Esto hace que las bibliotecas JS Drag and Drop sean una opción más potente y flexible para implementar funciones de arrastrar y soltar.

Esto es un gratis Biblioteca de arrastrar y soltar para JavaScript básico, Angular y React.

Características

• Súper fácil de configurar
• Sin dependencias infladas
• Calcula el orden de clasificación por sí mismo
• Una sombra donde se dejaría caer el artículo ofrece retroalimentación visual
• ¡Toca eventos!
• Maneja los clics sin problemas sin ninguna configuración
• Se puede utilizar directamente desde la CDN.

GitHub – bevacqua/dragula: :ok_hand: Arrastrar y soltar es tan simple que duele

:ok_hand: Arrastrar y soltar es tan simple que duele. Contribuya al desarrollo de bevacqua/dragula creando una cuenta en GitHub.

Dragact es una biblioteca reactiva de arrastrar y soltar para React. Es una biblioteca rápida que admite diseño responsivo, cuadrícula y diseño automático.

Características

• Sistema de cuadrícula de diseño automático
• También se puede operar en teléfonos móviles.
• Altamente adaptable
• componentes estáticos
• Arrastrar y soltar componentes
• Componentes de escalado automático
• Controlador de arrastre personalizado
• Controlador de zoom personalizado
• Disposición Responsive

Estado del proyecto

El desarrollo de este paquete se detuvo y el desarrollador recomienda otras bibliotecas.

GitHub – Foveluy/Dragact: un sistema de diseño de arrastrador con estilo React.

Un sistema de diseño de arrastre con estilo React. . Contribuya al desarrollo de Foveluy/Dragact creando una cuenta en GitHub.

3- Interactuar.js

Interactuar.js es una biblioteca de JavaScript para arrastrar y soltar, cambiar el tamaño y gestos multitáctiles. Es compatible con navegadores modernos e IE9+ y proporciona una API simple y flexible para mover elementos.

Características

• Gratis y de código abierto
• Potentes modificadores de ajuste y restricción
• lanzamiento inercial
• Múltiples interacciones simultáneas
• API unificada para eventos táctiles y de mouse
• Desplazamiento automático
• Soporte para HTML y SVG
• Documentación rica
• Admite gestos táctiles.

DFlex es una biblioteca JavaScript moderna de arrastrar y soltar que manipula el DOM directamente, en lugar de reconstruirlo.

Incluye su propio programador y conciliador, permite una funcionalidad personalizada y está diseñado para un alto rendimiento con cambios mínimos de diseño. Es una solución JavaScript pura adecuada para todos los marcos y también proporciona una colección de paquetes de utilidades DOM.

Características

• Mecanismo de transformación mejorado
• Enfoque único para la manipulación DOM
• Programador y conciliador integrados
• Expone manipulaciones de nodos.
• Construcción JavaScript básica
• API nativa
• Previene el retraso y minimiza el cambio de diseño
• Colección de paquetes de utilidades DOM
• Previene paquetes de producción hinchados
• Arquitectura dinámica
• Atravesar DOM sin llamar a la API del navegador
• Transformación DOM infinita
• Conciliador personalizado y mejorado
• Aislado del flujo de datos con un programador
• Transformación animada
• Sin cabeza y compatible con marcos JS modernos
• Orientación individual de cada elemento DOM
• API totalmente personalizada y basada en eventos
• Extensible mediante su propio algoritmo de coincidencia
• Admite tres tipos de restricciones
• Admite cuatro tipos de eventos personalizados y emisor de estado de diseño personalizado

DFlex | La biblioteca Javascript para aplicaciones modernas de arrastrar y soltar

Una biblioteca de arrastrar y soltar que manipula el DOM en lugar de reconstruirlo y tiene su propio programador y reconciliador.

OrdenableJS es una biblioteca de JavaScript gratuita que permite listas reordenables de arrastrar y soltar.

Características

• Creación de lista sencilla
• Listas compartidas
• Clonación de artículos
• Deshabilitar la clasificación
• Asas para gestionar artículos.
• Filtros para elementos que no se pueden arrastrar
• Umbrales ajustables para el intercambio.
• Soporte para varios marcos y complementos como MultiDrag y Swap.

OrdenableJS

Sortable: es una biblioteca de JavaScript para listas reordenables de arrastrar y soltar en navegadores y dispositivos táctiles modernos. No se requiere jQuery. Admite Meteor, AngularJS, React, Polymer, Vue, Knockout y cualquier biblioteca CSS, por ejemplo, Bootstrap.

Arrastrable es un integral Biblioteca JavaScript Drag & Drop que abstrae eventos nativos del navegador en una API para crear experiencias personalizadas de arrastrar y soltar. Viene con módulos adicionales: Ordenable, Droppable, Swappable, que son construido además de Draggable y proporciona una interfaz API similar.

Características

• Funciona con eventos nativos de arrastrar, mouse, tocar y forzar toque
• Puede extender el comportamiento de arrastre al conectarse al ciclo de vida del evento arrastrable
• Puede ampliar la detección de arrastre agregando sensores a los elementos arrastrables
• La biblioteca está dirigida primero a ES6

JS arrastrable: biblioteca de arrastrar y soltar de JavaScript

Draggable es una biblioteca de JavaScript de arrastrar y soltar, liviana, responsiva y moderna: la opción ideal para agregar un elegante comportamiento de arrastrar y soltar con sensación nativa a sus aplicaciones web.

JS arrastrable: biblioteca de arrastrar y soltar de JavaScript

Draggable es una biblioteca de JavaScript de arrastrar y soltar, liviana, responsiva y moderna: la opción ideal para agregar un elegante comportamiento de arrastrar y soltar con sensación nativa a sus aplicaciones web.

GitHub – Shopify/draggable: la biblioteca de arrastrar y soltar de JavaScript sobre la que te advirtieron tus abuelos.

La biblioteca JavaScript Drag & Drop sobre la que te advirtieron tus abuelos. – Shopify/arrastrable

DragSelect es una biblioteca JavaScript sencilla para seleccionar y mover elementos. Sin dependencias. Arrastrar y seleccionar y arrastrar y soltar.

Características

• Sin dependencias
• Altamente personalizable
• Replica la selección de arrastre del sistema operativo en el navegador
• Accesibilidad (a11 años)
• Uso de teclas modificadoras para selecciones independientes.
• Soporte de teclado para seleccionar, arrastrar y soltar
• Soporta todos los principales navegadores
• Ligero (solo tamaño gzip)
• Alto recuento de descargas de npm
• Diseñado pensando en el rendimiento (puede seleccionar >15 000 elementos)
• Soporta SVG
• Soporte móvil (interacción táctil)
• Gratis y de código abierto
• Fácil de usar

GitHub – ThibaultJanBeyer/DragSelect: una biblioteca JavaScript sencilla para seleccionar y mover elementos. Sin dependencias. Arrastrar y seleccionar y arrastrar y soltar. – Ejemplos:

Una biblioteca de JavaScript sencilla para seleccionar y mover elementos. Sin dependencias. Arrastrar y seleccionar y arrastrar y soltar. – Ejemplos: – ThibaultJanBeyer/DragSelect

Esta es una biblioteca/complemento de arrastrar y soltar gratuito y de código abierto para jQuery. Transforma la entrada de archivos con funciones como selección de múltiples archivos, compatibilidad con arrastrar y soltar, varias validaciones, miniaturas, íconos, carga instantánea, carga de pantalla impresa y muchas otras opciones.

Características

• Cambiar completamente la entrada del archivo
• Cargar archivos después de elegir
• Agregue más archivos a la entrada sin cargarlos
• Validar archivos (límite, tamaño, extensión)
• crear pulgares
• Iconos personalizados para cada tipo de archivo.
• Plantillas y temas personalizados para: entrada, pulgares, íconos
• Eliminar archivos elegidos/cargados
• Agregue archivos existentes a la entrada para obtener una vista previa
• Pegar imagen desde el portapapeles
• Subtítulos personalizados
• Devoluciones de llamada personalizadas
• Plantillas de variables en línea, por ejemplo: {{fi-limit}}
• Todos los íconos en una hermosa fuente
• Opción de arrastrar y soltar
• Métodos y valores API

GitHub – gerardbalaoro/jquery.filer: jQuery.filer – Herramienta sencilla de complemento de carga de archivos HTML5 para jQuery

jQuery.filer: herramienta sencilla de complemento para cargar archivos HTML5 para jQuery – gerardbalaoro/jquery.filer

9- No molestar (Reaccionar)

Reaccionar DnD es una biblioteca que proporciona funcionalidad de arrastrar y soltar para React.

GitHub – reaccionar-dnd/react-dnd: Arrastrar y soltar para React

Arrastra y suelta para reaccionar. Contribuya al desarrollo de reaccionar-dnd/react-dnd creando una cuenta en GitHub.

Arrastrar y soltar de FormKit es una pequeña biblioteca para agregar clasificación y transferencia de datos mediante arrastrar y soltar para listas en su aplicación. Es simple, flexible, independiente del marco y ocupa solo ~ 4 Kb comprimidos.

GitHub: kit de formulario/arrastrar y soltar

Contribuya al desarrollo de formkit/arrastrar y soltar creando una cuenta en GitHub.

Reaccionar-hermosa-dnd (rbd) es una biblioteca de arrastrar y soltar para listas con React.

Presenta un movimiento hermoso y natural de elementos, gran accesibilidad con compatibilidad con teclado y lector de pantalla, alto rendimiento, una API limpia y potente y compatibilidad con interacciones de navegador estándar. También ofrece un estilo sin opiniones y no crea nodos DOM envolventes adicionales.

GitHub – atlassian/react-beautiful-dnd: Arrastrar y soltar hermoso y accesible para listas con React

Hermoso y accesible arrastrar y soltar para listas con React – atlassian/react-beautiful-dnd

La API de arrastrar y soltar de HTML5 es compleja, pero las bibliotecas JS de arrastrar y soltar pretenden simplificarla con una API fácil de usar. Este biblioteca admite archivos y directorios, tiene una excelente compatibilidad con el navegador, agrega una clase de arrastre al destino de colocación al pasar el mouse para facilitar el estilo y, opcionalmente, proporciona los archivos como un búfer.

GitHub – feross/drag-drop: arrastrar y soltar HTML5 para humanos

Arrastrar y soltar HTML5 para humanos. Contribuya al desarrollo de feross/arrastrar y soltar creando una cuenta en GitHub.

ArrastrarDropiOS es un administrador de arrastrar y soltar para iOS que admite múltiples clases de UIView. Incluye implementaciones UICollectionView y UITableView del administrador de arrastrar y soltar.

GitHub – KevinZhouRafael/DragDropiOS: DragDropiOS es un administrador de arrastrar y soltar en iOS. Admite arrastrar y soltar en una o más clases y extiende UIView. Esta biblioteca contiene UICollectionView y UITableView que implementan el administrador de arrastrar y soltar.

DragDropiOS es un administrador de arrastrar y soltar en iOS. Admite arrastrar y soltar en una o más clases y extiende UIView. Esta biblioteca contiene UICollectionView y UITableView que implementan la función de arrastre…

Este es un complemento de arrastrar y soltar de JavaScript, gratuito y de código abierto, que funciona en IE5.

Características clave

• Agregue capacidad de arrastre a cualquier elemento DOM
• Agregar los contenedores de entrega correspondientes
• Devolución de llamada, clases y eventos disponibles
• Impresionante compatibilidad con navegadores, funciona incluso en IE5
• Facilidad de uso
• Ligero, solo 1 KB comprimido
• Rendimiento: dragNdrop utiliza CSS acelerado por hardware de forma predeterminada, lo que lo hace muy rápido. (elegantemente vuelve a la manipulación de posición normal si el navegador no lo admite)
• Gratis y de código abierto bajo licencia MIT
• Ejecutar desde CDN.

GitHub – ThibaultJanBeyer/dragNdrop: complemento sencillo de arrastrar y soltar de JavaScript – funciona en IE5 – Ejemplo:

Complemento sencillo de arrastrar y soltar de JavaScript: funciona en IE5. Ejemplo: – GitHub – ThibaultJanBeyer/dragNdrop: complemento sencillo de arrastrar y soltar de JavaScript. Funciona en IE5. Ejemplo: