Javascript 替代 Gridster？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12541423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative to Gridster?
提问by pmking
I have used the Gridsterlibrary 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.
我已经将Gridster库用于一个使用拖放式多列网格的项目。遗憾的是，Gridster 仅支持 Internet Explorer 9+。我需要找到一个类似的简单易用的库，它可以让我使用 IE8 做同样的事情，如果可能的话，它也与 IE7 和 IE6 兼容。
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.
那么，是否有用于旧 IE 的类似 Gridster 的库？我在这个项目中使用 jquery，所以基于 jquery 的库也可能很棒。
P.S. I've found one called AnimaDrag, but it's not as good as Gridster, and it's kind of bad.
PS 我找到了一个叫做AnimaDrag，但它不如 Gridster 好，而且有点糟糕。
回答by Jecimi
There are also Shapeshift : https://github.com/McPants/jquery.shapeshift
还有Shapeshift：https: //github.com/McPants/jquery.shapeshift
and Gridly : http://ksylvest.github.io/jquery-gridly/
和网格：http://ksylvest.github.io/jquery-gridly/
which are good alternatives to Gridster. (yet note that Gridly is for squared tiles only)
这是 Gridster 的良好替代品。（但请注意，Gridly 仅适用于方形瓷砖）
Edit : Packery is also very interesting : http://packery.metafizzy.co/. However it requires a commercial licence for commercial project otherwise :
编辑：Packery 也很有趣：http://packery.metafizzy.co/ 。但是，它需要商业项目的商业许可证，否则：
For non-commercial, personal, or open source projects and applications, you may use Packery under the terms of the GPL v3 License.
对于非商业、个人或开源项目和应用程序，您可以根据 GPL v3 许可证的条款使用 Packery。
Edit 2 : This one may also be useful : https://github.com/uberVU/grid
编辑 2：这个也可能有用：https: //github.com/uberVU/grid
回答by Javier
You can give a try to Gridstack: https://github.com/troolee/gridstack.jsIt's an early version but based strictly on gridster and it is also responsive.
你可以试试 Gridstack：https: //github.com/troolee/gridstack.js这是一个早期版本，但严格基于 gridster，它也是响应式的。
回答by Grozzer
[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]
[注意，我在该项目的 github 页面上发布了这个答案，涉及某人提出的类似问题。所以检查那里以防这个答案被纠正！- 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.
过去几天我遇到了类似的问题 - 尽管我只需要 IE8 支持（尽管它似乎可以在 IE7 中运行）。问题是代码正在正确更新页面，但 IE 不会在鼠标移动时拾取/评估数据行和数据列更改。我从上面的解决方案中尝试了几件事，直到使用 Modernizr 和类似的库，最后尝试绑定到仅 IE 的“propertychange”事件，但没有成功。
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).
这似乎是 IE8 的限制，它不会在鼠标按下/移动时重新评估使用 CSS 属性的元素。但是，它确实会检测类和内联更改（这就是您可以拖动框的原因）。
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.
因此，我能找到的唯一解决方案是在应该使用 jQuery .toggle() 更新小部件时在代码中添加/删除一个假类。所以当预览和小部件传递新的 data-col 和 data-row 属性时，我在代码中添加了它。这会强制 IE8 接受更改并预览效果。
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!
现在我确信除了不使用 IE8 之外还有一个（好多）更好的解决方案，它不能保证 IE8 的兼容性，但如果你被卡住了，那么你可能会发现这很有帮助！
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.
ps我只需要担心IE8+，IE7在使用modernizr和类似插件时似乎没问题。但是还没有在 IE6 中尝试过，但我怀疑它会起作用。
[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 :
按照下面的评论，我现在已经上传到一个示例 - 尽管我无法让 IE8 与 JSFiddle 一起玩。所以它在 IE8 中工作的例子在这里：
https://s3-eu-west-1.amazonaws.com/707074webfiles/gridster/ie8test.html
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.
我已经包含了 IE9.js，它（大部分）在这个实例中为预览添加了透明效果。
The modified copy of the gridster.js file is here:
gridster.js 文件的修改副本在这里：
https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js
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.
它确实包括许多与调整小部件大小相关的其他更改。但是，如果您只想要 IE8 更改，那么我想最好的答案是搜索它以提及 ie8compat。
At the time of writing the line changes for ie8 are :
在撰写本文时，ie8 的行更改是：
- 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
- 717：添加了 IE8 兼容性选项
- 2054 - 2056：向预览小部件添加了 .toggle 选项
- 2433 - 2435：为向上移动的任何小部件添加了 .toggle 选项
- 2488 - 2490：向向下移动的任何小部件添加了 .toggle 选项
回答by Fred Johnson
Those looking at this wanting something for react there's react-grid-layout which doesn't seem to be getting issues fixed much:
那些看着这个想要做出反应的人有 react-grid-layout 似乎并没有解决很多问题：
https://github.com/STRML/react-grid-layout
https://github.com/STRML/react-grid-layout
or react-curator:
或反应策展人：
回答by Anshu
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 draggableand jQuery droppable
没错，gridster 支持 Internet Explorer 9+、Firefox、Chrome、Safari 和 Opera。
如果您希望支持较旧的 IE 浏览器（6+），为什么不围绕jQuery draggable和jQuery droppable构建功能
回答by Kaherdin
Did you try a polyfill to simulate the data-set functions of gridster ? http://www.orangesoda.net/jquery.dataset.htmlmay be a good alternative.
您是否尝试过使用 polyfill 来模拟 gridster 的数据集功能？ http://www.orangesoda.net/jquery.dataset.html可能是一个不错的选择。
