Dashboards are everywhere, however not all of them are so cool like others. A dashboard that allows the user to move a widget from one position to another and this configuration is saved somewhere and rendered again everytime the user comes back is one of the best features that you can implement inside an administrative application. Fortunately for you, implementing such feature on your project can be made in matter of minutes using an open source plugin.
Pitifully there are no plenty plugins that help you with this feature, however you may find enough of them that aren't so good, that's why we have collected for you 5 of the most imponent plugins to get started with your dynamic, resizable and modifiable dashboard.
5. Layout Grid
Gridly is a jQuery plugin that allows you initialize a layout that can be modified by dragging and dropping as well as resizing on a grid.
Inspired heavily by the jQuery Masonry plugin, Shapeshift is a 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. The library offers:
Drag and Drop Rearrange items within a container or even drag items between multiple Shapeshift enabled containers. Dragging elements around will physically change their index position within their parent container. When a page reloads, as long as the child elements are placed in the correct order then the grid will look exactly the same.
Works on Touch Devices Shapeshift uses jQuery UI Draggable/Droppable for help with the drag and drop system. Luckily there is already a plugin called jQuery Touch Punch which provides touch support for jQuery UI D/D. It can be found in the vendor folder.
Multiwidth Elements A new feature in 2.0 is the ability to add elements that can span across multiple columns as long as their width is correctly set through CSS.
Responsive Grid Enabled by default, Shapeshift will listen for window resize events and arrange the elements within it according to the space provided by their parent container.
- A Fully customizable layout
- Drag & drop (even between grids)
- Nested grids
- Fast animations
To use Gridstack you will need jQuery UI (>= 1.12.0) with at least the following components: Core, Widget, Mouse, Draggable, Resizable.