Top 5: Los mejores complementos de JavaScript y jQuery para crear elementos arrastrables y ordenables

Top 5: Los mejores complementos de JavaScript y jQuery para crear elementos arrastrables y ordenables

La habilidad de arrastrar y soltar elementos por la pantalla, ordenar listas, cambiar la posición de algunos elementos según nuestras necesidades es bastante útil y necesaria hoy en día, créanme, no a todo el mundo le gusta hacer este tipo de cosas con casillas de verificación, selecciones y botones. Si está dispuesto a implementar estas funciones en algunos elementos de su sitio web, hay muchas bibliotecas que le permiten hacerlo, sin embargo, no todas satisfacen la mayoría de las necesidades del desarrollador estándar.

Es por eso que queremos compartir con usted una pequeña colección de los complementos arrastrables más importantes, más conocidos y fáciles de usar para comenzar con esta función en su proyecto lo antes posible.

5. Draggabilly

Github

Draggabilly

Draggabilly es un complemento de VanillaJS que le permite hacer que cualquier elemento sea arrastrable, es compatible con IE10 + y dispositivos táctiles.

4. Dragula

Github

Biblioteca Dragula Drag & Drop

¿Alguna vez ha querido una biblioteca de arrastrar y soltar que simplemente funciona? Eso no solo depende de marcos inflados, ¿tiene un gran apoyo? ¿Que realmente entiende dónde colocar los elementos cuando se caen? ¿Eso no necesita que hagas un trillón de cosas para que funcione? Bueno, ¡también lo hizo el desarrollador de esta biblioteca! Dragula es una biblioteca de arrastrar y soltar muy fácil de usar. Ofrece soporte de navegador que incluye todos los navegadores cuerdos e IE7 +. (Concedido que rellene los métodos funcionales Array en ES5). La compatibilidad con el marco incluye JavaScript vanilla, Angular y React.

  • Muy fácil de configurar
  • Sin dependencias hinchadas
  • Averigua el orden de clasificación  por sí solo
  • Una sombra donde se dejaría caer el artículo ofrece retroalimentación visual 
  • Toque eventos!
  • Maneja perfectamente los clics sin ninguna configuración 

3. Interact.js

Interact.js

Arrastrar y soltar JavaScript, cambiar el tamaño y gestos multitáctiles para navegadores modernos (y también IE9 +). Las características de los complementos:

  • Potentes modificadores de ajuste y restricción
  • Lanzamiento inercial
  • Varias interacciones simultáneas
  • API unificada para eventos táctiles y de mouse
  • Desplazamiento automático
  • inercia  y chasquido 
  • interacciones simultáneas multitáctiles
  • varios navegadores y dispositivos, compatibles con las versiones de escritorio y móviles de Chrome, Firefox y Opera, así como Internet Explorer 9+   
  • interacción con elementos SVG  
  • ser independiente y personalizable 
  • no modificar el DOM  excepto para cambiar el cursor (pero puede deshabilitar eso)

2. JS arrastrable

Github

JS arrastrable

Draggable es una biblioteca de arrastrar y soltar liviana, receptiva y moderna desarrollada y mantenida originalmente por los chicos de Shopify y los colaboradores de código abierto. Con la función de arrastrar, puede obtener un control total sobre el comportamiento de arrastrar y soltar de su aplicación web. Arrastrable abstrae los eventos nativos del navegador en una API completa para crear una experiencia personalizada de arrastrar y soltar. Draggable viene con módulos adicionales: Clasificable, Droppable, Swappable. Arrastrable en sí no realiza ningún comportamiento de clasificación mientras se arrastra, pero hace el trabajo pesado, por ejemplo, crea un espejo, emite eventos, administra eventos de sensor, hace que los elementos se puedan arrastrar. Las características más conocidas son:

  • Funciona con eventos nativos de arrastre, mouse, toque y toque forzado
  • Puede extender el comportamiento de arrastre al engancharse al ciclo de vida de eventos de draggables
  • Puede extender la detección de arrastre agregando sensores para arrastrar
  • La biblioteca está dirigida a ES6 primero

Draggable no va a intentar robarse el espectáculo al imponerle estilos de animación rebeldes. Simplemente elija entre nuestra saludable porción de selectores CSS y elija el estilo que desee.

1. jQuery UI

Descargar (filtrar solo el componente arrastrable)

jQuery UI arrastrable

Los componentes de jQuery UI siguen siendo los reyes de los complementos arrastrables. jQueryUI proporciona el método draggable () para hacer que cualquier elemento DOM se pueda arrastrar. Una vez que el elemento se puede arrastrar, puede mover ese elemento haciendo clic en él con el mouse y arrastrándolo a cualquier lugar dentro de la ventana gráfica.

Si conoce otra biblioteca relacionada que se puede arrastrar, ordenar y cambiar de tamaño que se puede usar con jQuery o JavaScript simple, compártala con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable