Top 5: Los mejores plugins de jQuery y JavaScript para diseño de cuadrícula que se pueden arrastrar, soltar y cambiar de tamaño

Top 5: Los mejores plugins de jQuery y JavaScript para diseño de cuadrícula que se pueden arrastrar, soltar y cambiar de tamaño

Los paneles están en todas partes, sin embargo, no todos son tan geniales como otros. Un tablero que permite al usuario mover un widget de una posición a otra y esta configuración se guarda en algún lugar y se vuelve a representar cada vez que el usuario regresa es una de las mejores características que puede implementar dentro de una aplicación administrativa. Afortunadamente para usted, la implementación de dicha función en su proyecto se puede realizar en cuestión de minutos utilizando un complemento de código abierto.

Lamentablemente, no hay muchos complementos que lo ayuden con esta función, sin embargo, es posible que encuentre suficientes que no sean tan buenos, por eso hemos recopilado para usted 5 de los complementos más importantes para comenzar con su dinámica, redimensionable y modificable. tablero.

5. Cuadrícula de diseño

Github

La cuadrícula de diseño es una cuadrícula de respuesta jQStatic con CSS puro. Javascript que usa la función de arrastrar y soltar nativa para reordenar para cada tamaño de pantalla en computadoras de escritorio y dispositivos móviles.

Plugin jQuery de Layout Grid

Layout Grid es un complemento que le permite construir una cuadrícula de respuesta estática con CSS puro y usando Javascript para proporcionar soporte nativo de arrastrar y soltar para reordenar para cada tamaño de pantalla en computadoras de escritorio y dispositivos móviles.

4. jQuery Gridly

Github

Gridly es un complemento de jQuery que le permite inicializar un diseño que se puede modificar arrastrando y soltando, así como cambiando el tamaño en una cuadrícula.

jQuery Gridly

3. Cambio de forma de jQuery

Github

 Inspirado en gran medida por el complemento jQuery Masonry, Shapeshift es un complemento que organizará dinámicamente una colección de elementos en un sistema de cuadrícula de columnas similar a Pinterest. Lo que lo distingue es la capacidad de arrastrar y soltar elementos dentro de la cuadrícula mientras se mantiene una posición de índice lógica para cada elemento. Esto permite que la cuadrícula se renderice exactamente igual cada vez que se use Shapeshift, siempre que los elementos secundarios estén en el orden correcto. La biblioteca ofrece:

  • Arrastrar y soltar  Reorganice los elementos dentro de un contenedor o incluso arrastre elementos entre varios contenedores habilitados para Shapeshift. Arrastrar elementos cambiará físicamente su posición de índice dentro de su contenedor principal. Cuando se vuelve a cargar una página, siempre que los elementos secundarios se coloquen en el orden correcto, la cuadrícula se verá exactamente igual.

  • Funciona en dispositivos táctiles  Shapeshift usa jQuery UI Draggable / Droppable para ayudar con el sistema de arrastrar y soltar. Afortunadamente, ya existe un complemento llamado jQuery Touch Punch que brinda soporte táctil para jQuery UI D / D. Se puede encontrar en la carpeta del proveedor.  

  • Elementos de ancho múltiple  Una nueva característica en 2.0 es la capacidad de agregar elementos que pueden abarcar varias columnas siempre que su ancho esté configurado correctamente a través de CSS.

  • Cuadrícula  receptiva Habilitada de forma predeterminada, Shapeshift escuchará los eventos de cambio de tamaño de la ventana y organizará los elementos dentro de ella de acuerdo con el espacio proporcionado por su contenedor principal.

jQuery ShapeShift

2. Muuri

Github

Diseñador de diseño de cuadrícula de Muuri

Muuri es un motor de diseño de JavaScript mágico que le permite crear todo tipo de diseños y hacerlos receptivos, clasificables, filtrables, arrastrables y / o animados. Comparado con lo que hay por ahí, Muuri es una combinación de Packery, Masonry, Isotope y Sortable. El algoritmo de diseño de empaquetado de contenedores "First Fit" predeterminado de Muuri genera diseños similares a Packery y Masonry. La implementación se basa en gran medida en el enfoque "maxrects" como lo describe Jukka Jylänki en su investigación A Thousand Ways to Pack the Bin. Si esa no es su taza de té, siempre puede proporcionar su propio algoritmo de diseño para colocar los elementos como desee. Muuri usa animaciones web para impulsar su motor de animación interno y Hammer.js para manejar el arrastre. Y si te preguntas por el nombre de la biblioteca "muuri" es el finlandés que significa una pared. Las características del complemento:

  • Un diseño totalmente personalizable
  • Arrastrar y soltar (incluso entre cuadrículas)
  • Cuadrículas anidadas
  • Animaciones rápidas
  • Filtración
  • Clasificación

1. Gridstack.js

Originalmente conocido como gridster.js, el proyecto fue inicialmente abandonado por sus desarrolladores, sin embargo, gracias al potencial de la biblioteca en sí, fue adoptado por radiolips y trolee creando el grupo Gridstack en Github donde puedes encontrar el proyecto Gristack hoy, una bifurcación mantenida de la biblioteca original que utilizan muchos desarrolladores de todo el mundo. Gridstack.js es una biblioteca de JavaScript compatible con dispositivos móviles para el diseño y la creación de paneles. Crear un tablero de múltiples columnas de arrastrar y soltar nunca ha sido tan fácil. gridstack.js le permite crear diseños fáciles de arrastrar y receptivos para bootstrap v3. También funciona muy bien con knockout.js, angular.js, ember.

Para usar Gridstack, necesitará jQuery UI (> = 1.12.0) con al menos los siguientes componentes: Core, Widget, Mouse, Draggable, Resizable.

Complemento Gridster.js

Menciones honoríficas

Embalaje

Packery es una biblioteca de JavaScript y un complemento de jQuery que crea diseños sin espacios y que se pueden arrastrar. Utiliza un algoritmo de empaquetado de contenedores para llenar los espacios vacíos. Los diseños de empaque se pueden ordenar de manera inteligente o orgánicamente salvaje. Los elementos se pueden estampar en su lugar, encajar en un lugar específico o arrastrar. Es perfecto para paneles de control arrastrables y galerías de imágenes de mampostería integradas.

Diseño de cuadrícula arrastrable de Packery

Si conoce otro complemento de jQuery / JavaScript increíble para crear diseños de cuadrícula que se pueden arrastrar, compártalo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable