Top 5: Los mejores complementos de JavaScript y jQuery de listas ordenables y arrastrables

Top 5: Los mejores complementos de JavaScript y jQuery de listas ordenables y arrastrables

Aunque el complemento ordenable de jQuery es sin duda una de las características más conocidas de la biblioteca, a veces no está dispuesto a incluir toda la biblioteca de la interfaz de usuario de jQuery para agregar esta característica, en su lugar, es posible que desee utilizar otra biblioteca básica para implementar esta característica , o complementarlo con jQuery (sin jQuery UI).

En esta parte superior, compartiremos contigo 5 de los complementos más útiles para crear listas ordenables arrastrando y soltando en JavaScript.

5. HTML5 clasificable

Github

Complemento clasificable HTML5

HTML5 es una micro-biblioteca ligera de Vanillajs para crear listas y cuadrículas que se pueden ordenar usando la API nativa de arrastrar y soltar HTML5. Esta plantilla incluye:

  • Solo 2 KB (minificado y comprimido con gzip).
  • Construido con la API nativa de arrastrar y soltar HTML5. Sin dependencias.
  • Admite diseños de estilo de lista y cuadrícula.
  • Navegadores compatibles: versiones actuales de todos los navegadores principales (Chrome, Firefox, Safari, Opera, Edge), IE11 + (se requiere Polyfill) 
  • Disponible como módulo ES6, AMD, CommonJS e iffe con global sortable 

Si bien un enfoque orientado hacia atrás penaliza a los navegadores modernos al hacer que descarguen archivos enormes, preferimos enviar un paquete pequeño y tener un navegador obsoleto que soporta la penalización del polyfill. Un beneficio adicional es que puede rellenar esas funciones en cualquier caso para no tener ninguna carga adicional.

4. Listas ordenables de jQuery

Github

Listas ordenables de jQuery

Plugin jQuery para ordenar listas también las estructuras de árbol. Movimiento suave mientras se arrastra y se desplaza. Puede ordenar los elementos de las listas html con el mouse. Crea estructuras de árbol. Formatee todos los elementos activos. Puede definir la devolución de llamada isAllowed, que determina si el elemento arrastrado se puede insertar en otro. Insertar zona como una distancia que determina si el elemento se insertará dentro o fuera del área activa, velocidad de la función de desplazamiento automático. Está disponible onDragStart, onChange y devolución de llamada completa y más. Para una mejor comprensión, mire la imagen que describe todos los elementos activos en el complemento de listas ordenables. Ahora el complemento también es compatible con dispositivos móviles. Vincula jquery-sortable-lists-mobile.js en lugar de jquery-sortable-lists.js.

3.   Complemento decorador ordenable Ractive.js

Github

Complemento ordenable Ractive JavaScript

Este complemento agrega un decorador ordenable a Ractive, que permite reordenar los elementos que corresponden a los miembros de la matriz utilizando la API de arrastrar y soltar HTML5. Hacerlo actualizará el orden de la matriz. Cuando el usuario arrastra el elemento de origen sobre un elemento de destino, el elemento de destino tendrá un nombre de clase agregado. Esto le permite representar el objetivo de manera diferente (por ejemplo, ocultar el texto, agregar un borde punteado, lo que sea). Por defecto, este nombre de clase es 'droptarget'.

2. jQuery clasificable

Github

jQuery clasificable

jQuery Sortable es un complemento de clasificación flexible y obstinado. Permite que los elementos de una lista (o tabla, etc.) se clasifiquen horizontal y verticalmente con el mouse. Admite listas anidadas y contenedores de arrastrar / soltar puros. jQuery Sortable no depende de la interfaz de usuario de jQuery y funciona bien con Bootstrap de Twitter (incluso puede ordenar la navegación de Bootstrap). Características de este complemento:

  • Clasifica cualquier artículo en cualquier contenedor
  • Totalmente compatible con contenedores anidados
  • Conectar listas
  • Devolución de llamada y eventos (ver documentos)
  • Listas de arrastrar / soltar puro
  • Clasificación vertical y horizontal

1. SortableJS

Github

SortableJS

SortableJS es uno de los componentes más conocidos que le permite reordenar listas arrastrando y soltando con JavaScript. Sortable es una biblioteca de JavaScript para listas de arrastrar y soltar reordenables. Esta biblioteca incluye:

  • Admite dispositivos táctiles y navegadores modernos (incluido IE9)
  • Puede arrastrar de una lista a otra o dentro de la misma lista
  • Animación CSS al mover elementos
  • Admite controles de arrastre y texto seleccionable (mejor que html5sortable de voidberg)  
  • Desplazamiento automático inteligente
  • Detección de intercambio avanzada
  • Construido con la API nativa de arrastrar y soltar HTML5
  • Apoyos
  • Admite cualquier biblioteca CSS, por ejemplo, Bootstrap 
  • API simple
  • CDN
  • No se requiere jQuery (pero hay soporte ) 

Si conoce otro componente de código abierto impresionante que le permite ordenar listas arrastrando y soltando, por favor compártalo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable