9 jQuery Drag & Drop Grid Layout Plugins

If you want to improve your layouts and add dynamic behaviour to your site, here are some jQuery plugins to help you build highly functional drag-and-drop grid layouts that look great and work on most modern browsers.



Gridstack.js

Grid layout plugin inspired by Gridster that allows you to dynamically and responsively rearrange grid items through drag and drop.

gridstack.js

Gridly

It allows developers to display HTML elements on a grid-like pattern. It works with any HTML elements and can dynamically rearrange the grid if elements are added or removed.

jQuery Gridly

Gridster.js

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

Gridster.js

GridList

A jQuery plugin built on top of the GridList class that translates the generic items positions into responsive DOM elements with drag and drop capabilities.

GridList

Shapeshift

Plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order.

HTML5 Sortable

Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

HTML5 Sortable

Packery

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Packery

Freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts for desktop, mobile, and tablet.

Freewall

jQuery Sortable Photos

jQuery Sortable Photos is a jQuery UI plugin that can display photos in a responsive, sortable grid. The photo grid is arranged in such a way that the height of the images in each row is consistent, and the images are resized to fill in the full width. The grid can optionally be configured to allow drag-and-drop sorting.

jQuery Sortable Photos

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.