Alternative to Gridster? [closed]

Answer 1

Did you try a polyfill to simulate the data-set functions of gridster ? http://www.orangesoda.net/jquery.dataset.html may be a good alternative.

Answer 2

There are also Shapeshift : https://github.com/McPants/jquery.shapeshift

and Gridly : http://ksylvest.github.io/jquery-gridly/

which are good alternatives to Gridster. (yet note that Gridly is for squared tiles only)

Edit : Packery is also very interesting : http://packery.metafizzy.co/ . However it requires a commercial licence for commercial project otherwise :

For non-commercial, personal, or open source projects and applications, you may use Packery under the terms of the GPL v3 License.

Edit 2 : This one may also be useful : https://github.com/uberVU/grid

Answer 3

That is correct, gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.
If you wish to support the older IE browsers (6+), why not build functionalities around jQuery draggable and jQuery droppable

Answer 4

Those looking at this wanting something for react there's react-grid-layout which doesn't seem to be getting issues fixed much:

https://github.com/STRML/react-grid-layout

or react-curator:

https://github.com/codetrove-development/react-curator

Answer 5

[N.B. I posted this answer on the github page for the project on a similar question someone had raised. So check there in case this answer was corrected! - https://github.com/ducksboard/gridster.js/issues/74]

I spent the past few days with a similar issue - although I only needed IE8 support (though it seems to work in IE7). The issue was the code is updating the page correctly but IE would not pick-up/evaluate the data-row & data-col changes while the mouse was moving. I tried several things from the solution above, through to using modernizr & similar libraries and finally trying to bind to the IE only 'propertychange' event with no success.

It seems to be an IE8 limitation that it won't re-evaluate an element that is using CSS Attributes while the mouse is down/moving. However, it does detect class and in-line changes (which is why you can drag the box around).

Therefore the only solution I could find with the time available was to add/remove a fake class in the code whenever the widgets should be updated using jQuery .toggle(). So I added it in the code when the preview and widgets were passed new data-col & data-row attributes. This forces IE8 to pick up the change and voila the preview works.

Now I am sure there is a (much) better solution besides not using IE8 and it doesn't guarantee IE8 compatibility but if you're stuck then you may find this helpful!

p.s. I only had to worry about IE8+, IE7 seemed to be okay when using modernizr and similar plugins. However haven't tried in IE6 but I doubt it would work.

[EDIT]

Following the comment below I've now uploaded to an example - although I couldn't get IE8 to play nice with JSFiddle. So the example of it working in IE8 is here instead :

https://s3-eu-west-1.amazonaws.com/707074webfiles/gridster/ie8test.html

I have included IE9.js which (mostly) adds the transparency effect for the preview in this instance.

The modified copy of the gridster.js file is here:

https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js

It does include a number of other changes related to the resizing of widgets. However if you only want then IE8 changes then I suppose the best answer is to search it for mention of ie8compat.

At the time of writing the line changes for ie8 are :

• 717 : Added IE8 compatibility option
• 2054 - 2056 : Added the .toggle option to the preview widget
• 2433 - 2435 : Added the .toggle option to any widgets moved up
• 2488 - 2490 : Added the .toggle option to any widgets moved down

Answer 6

You can give a try to Gridstack: https://github.com/troolee/gridstack.js It's an early version but based strictly on gridster and it is also responsive.