Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed last year.
I have used the Gridster library for a project that uses a drag-and-drop multi-column grid. Sadly, Gridster only supports Internet Explorer 9+.
I need to find a similar simple-to-use library which lets me do the same using IE8, and if it possible also compatible with IE7, and IE6 too.
So, is there any Gridster-like library out there for the old-IE's? I'm using jquery in this project, so a jquery-based library could be also great.
P.S. I've found one called AnimaDrag, but it's not as good as Gridster, and it's kind of bad.
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
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.
[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
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
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.
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
