22

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

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

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

4

6 回答 6

20

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

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

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

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

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

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

于 2013-12-13T16:25:28.090 回答
16

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

于 2015-05-08T19:03:10.200 回答
5

[注意，我在项目的 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 的兼容性，但是如果你遇到困难，那么你可能会发现这很有帮助！

ps 我只需要担心 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 选项
于 2013-03-04T14:07:25.780 回答
1

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

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

或反应策展人：

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

于 2019-05-04T15:16:17.003 回答
0

没错，gridster 支持 Internet Explorer 9+、Firefox、Chrome、Safari 和 Opera。
如果您希望支持较旧的 IE 浏览器（6+），为什么不围绕jQuery draggable和jQuery droppable构建功能

于 2012-09-22T07:20:27.740 回答
0

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

于 2012-10-30T08:55:20.457 回答