Use the project library gridster.js
(the users themselves can change the tiles, add new, etc.). The library contains a method to dump the location and size of the tiles, but when restoring there is one unpleasant feature.
If in the constructor you don't specify extra_cols (additional columns), tiles are drawn consistently within the limits of the screen. But the question is how to restore the original location (in my case - in a row). Example: jsfiddle.net/ekvfe/7
If you specify extra_cols, it seems all is drawn normally. But if we add another tile, it will draw outside the screen (like how there is more free tiles and will draw there). I would like to still draw below, without going outside, and the user will move it if necessary.
By the way, there is a method generate_grid_and_stylesheet(), which sort of updates the layout when you change the settings, but it is not clear how it works (tiles overlap each other)
In General, help please:)