How to create a non-stackable widget grid?
There are a lot of jQuery plugins to create grids where we can place widgets inside : - gridster - gridly - maybe others ?
All of them are stacking the widgets either horizontally or vertically. What I want to do is to have a 'free grid' where I can place widgets independently.
To have a better understanding, here are some 'drawings' :
[x]: occupied grid slot [ ]: empty grid slot
This is what plugins like gridster and gridly are doing. They are stacking vertically, placing something like the [o] is not possible because there is nothing under.
[x][x][x][ ] [x][ ][x][ ] [ ][ ][x][ ] [ ][ ][ ][o]
What I want to do. Here we can place items where we want.
[ ][ ][x][ ] [ ][x][ ][x] [ ][ ][ ][x] [x][ ][x][ ]
What is the best way to achieve that ?
Ok, for those who are searching an angular module to achieve that there is the great angular-gridster which is based on the gridster jQuery plugin. Very configurable and works perfectly.