Gridster 的替代品？ [关闭]答案

【问题标题】：Alternative to Gridster? [closed]Gridster 的替代品？ [关闭]
【发布时间】：2012-09-14 12:27:45
【问题描述】：

我将Gridster 库用于使用拖放式多列网格的项目。遗憾的是，Gridster 仅支持 Internet Explorer 9+。我需要找到一个类似的易于使用的库，它可以让我使用 IE8 做同样的事情，如果可能的话还兼容 IE7 和 IE6。

那么，对于旧的 IE，有没有类似 Gridster 的库？我在这个项目中使用的是 jquery，所以基于 jquery 的库也可能很棒。

附：我找到了一个叫AnimaDrag，但它不如Gridster，而且有点糟糕。

【问题讨论】：

在研究 gridster 时遇到了这篇文章：你能在最新版本的 jQuery 中使用 gridster 吗？ (1.8.x)。 . .似乎它停止工作高于 1.7.2 - 你能确认吗？
不，我做不到。我从 v1.8.x 开始，但遇到了一些问题。现在我使用的是 v1.7.2。
这里也一样，但我的门户的其余部分使用最新的 jQuery，我们有点想避免使用 .noConflict，但这就是我现在所采用的方法。我希望 gridster.net 经常升级，也发布在他们的 GitHub 上..

标签： javascript jquery animation drag-and-drop grid

【解决方案1】：

还有Shapeshift：https://github.com/McPants/jquery.shapeshift

和网格：http://ksylvest.github.io/jquery-gridly/

这是 Gridster 的不错替代品。（但请注意，Gridly 仅适用于方形瓷砖）

编辑：包装也很有趣：http://packery.metafizzy.co/ .但是，否则它需要商业项目的商业许可证：

对于非商业、个人或开源项目和应用程序，您可以根据 GPL v3 的条款使用 Packery 许可。

编辑 2：这个也可能有用：https://github.com/uberVU/grid

【讨论】：

【解决方案2】：

你可以试试Gridstack：https://github.com/troolee/gridstack.js 这是一个早期版本，但严格基于 gridster，而且它也是响应式的。

【讨论】：

一年后仍然非常活跃，看起来很棒。感谢您指出这一点。

【解决方案3】：

[注：我在项目的 github 页面上发布了这个答案，关于有人提出的类似问题。所以检查那里，以防这个答案被纠正！ - https://github.com/ducksboard/gridster.js/issues/74]

过去几天我遇到了类似的问题 - 尽管我只需要 IE8 支持（尽管它似乎在 IE7 中工作）。问题是代码正在正确更新页面，但 IE 不会在鼠标移动时获取/评估数据行和数据列的更改。我从上面的解决方案中尝试了几件事，通过使用 modernizr 和类似的库，最后尝试绑定到 IE only 'propertychange' 事件但没有成功。

这似乎是 IE8 的限制，它不会在鼠标向下/移动时重新评估正在使用 CSS 属性的元素。但是，它确实检测到类和内联更改（这就是您可以拖动框的原因）。

因此，我能找到的唯一解决方案是在需要使用 jQuery .toggle() 更新小部件时在代码中添加/删除假类。因此，当预览和小部件被传递新的 data-col 和 data-row 属性时，我在代码中添加了它。这会迫使 IE8 接受更改并查看预览效果。

现在我确信除了不使用 IE8 之外还有一个（很多）更好的解决方案，它不能保证 IE8 的兼容性，但如果你遇到困难，那么你可能会发现这很有帮助！

附言我只需要担心 IE8+，IE7 在使用modernizr 和类似插件时似乎还可以。但是没有在 IE6 中尝试过，但我怀疑它会起作用。

[编辑]

根据下面的评论，我现在上传了一个示例 - 尽管我无法让 IE8 与 JSFiddle 一起玩得很好。所以它在 IE8 中工作的例子就在这里：

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

我已经包含了 IE9.js，它（主要）在这个实例中为预览添加了透明效果。

gridster.js 文件的修改副本在这里：

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

它确实包含许多与小部件大小调整相关的其他更改。但是，如果您只想要 IE8 更改，那么我想最好的答案是搜索它以查找 ie8compat。

在编写 ie8 时，行更改为：

717：添加了 IE8 兼容性选项
2054 - 2056：为预览小部件添加了 .toggle 选项
2433 - 2435：为任何向上移动的小部件添加了 .toggle 选项
2488 - 2490：为任何向下移动的小部件添加了 .toggle 选项

【讨论】：

呃，我不完全确定你的回答对我有什么帮助。我的意思是，这是一个内容丰富的答案，但我实际上不知道你做了哪些改变来使它工作。在这些情况下，JSFiddle 可能有助于显示您所做的工作
你说的很对——对不起。我已经对代码进行了分叉，并将在明天更新相关更改。我试图从记忆中添加它们（坏主意）但得到了一些奇怪的行为。但是，如果您查看此处 (github.com/Grozzer/gridster.js/blob/master/dist/…) 并同时搜索 ie8compat，您可能会更好地理解我的意思。所以希望我明天会更有帮助:)

【解决方案4】：

那些看到这个想要反应的人有 react-grid-layout 似乎并没有解决太多问题：

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

或反应策展人：

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

【讨论】：

值得注意的是，关于软件/库/教程/文档推荐的问题在 Stack Overflow 上是题外话，因为它们是垃圾邮件答案的载体。如果可以的话，最好不要回答这些问题。

【解决方案5】：

没错，gridster 支持 Internet Explorer 9+、Firefox、Chrome、Safari 和 Opera。
如果您希望支持旧版 IE 浏览器 (6+)，何不围绕 jQuery draggable 和 @987654322 构建功能@

【讨论】：

嗯，这正是我不想做的。我的意思是，gridster 已经是一个完全可定制的拖放式多列网格。它易于使用，无需进行大量编程。我只是想知道旧版本的 IE 是否有类似的库

【解决方案6】：

您是否尝试过使用 polyfill 来模拟 gridster 的数据集功能？ http://www.orangesoda.net/jquery.dataset.html 可能是一个不错的选择。

【讨论】：

好吧.....我不确定我会使用那个替代方案.. 这样做似乎“耗时”而且有点“不那么容易”.. 如果你明白我的意思。
orangesoda.net 似乎不再存在。