Gridster的替代方案是什么?

22

我曾在一个使用拖放多列网格的项目中使用了Gridster库。不幸的是,Gridster仅支持Internet Explorer 9+。我需要找到一个类似的简单易用的库,可以让我在IE8中实现相同的功能,并且如果可能还兼容IE7和IE6。

那么,有没有类似于Gridster的库适用于旧版本的IE浏览器?我在这个项目中使用了jquery,所以基于jquery的库也很好。

P.S. 我找到了一个叫做AnimaDrag的库,但它不如Gridster好用,而且不太好。


在研究Gridster时遇到了这篇文章:您能否在最新版本的jQuery(1.8.x)中使用Gridster?...似乎它在高于1.7.2的任何版本上都无法正常工作 - 您能确认吗? - Code Monkey
不,我没能做到。我开始使用v1.8.x,但是遇到了一些问题。现在我正在使用v1.7.2。 - pmking
我也一样,但是我的门户网站的其余部分使用了最新的jQuery,我们想要避免使用.noConflict,但目前不得不这样做。我希望gridster.net会经常升级,并在GitHub上发布更新。 - Code Monkey
6个回答

20

还有两个替代Gridster的好选择: Shapeshift : https://github.com/McPants/jquery.shapeshift 和 Gridly : http://ksylvest.github.io/jquery-gridly/ (但请注意,Gridly仅适用于正方形瓷砖)。

编辑: Packery 也非常有趣:http://packery.metafizzy.co/。但是,商业项目需要购买商业许可证,否则:

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

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


16

2
一年后仍然非常活跃,看起来很不错。感谢您指出这点。 - Sean Connolly

5
[N.B. 我在类似问题的github页面上发布了这个答案。因此请检查那里,以防此答案被更正!- https://github.com/ducksboard/gridster.js/issues/74]
我过去几天遇到了一个类似的问题 - 尽管我只需要IE8支持(尽管它似乎在IE7中也可以工作)。问题是代码正确地更新了页面,但IE在鼠标移动时无法捕捉/评估data-row和data-col的更改。我尝试了以上解决方案中的几种方法,通过使用modernizr和类似的库,最后尝试绑定到仅适用于IE的'propertychange'事件,但均未成功。
似乎这是IE8的限制,它不会重新评估正在使用CSS属性的元素,而鼠标正在按下/移动。然而,它确实检测到类和行内更改(这就是为什么你可以拖动框)。
因此,我能够找到的唯一解决方案是在代码中添加/删除一个虚假的类,每当小部件应该使用jQuery .toggle()更新时。所以我在预览和小部件传递新的数据列& data-row属性时将其添加到代码中。这迫使IE8捕捉到更改,预览就可以工作了。
现在我相信除了不使用IE8之外,还有更好的解决方案,但这并不能保证IE8的兼容性,但如果你被困住了,你可能会发现这很有帮助! 附注:我只需要担心IE8+,当使用modernizr和类似的插件时,IE7似乎没问题。然而,我没有在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可能会很有用,以展示你所做的内容。 - pmking
你说得很对 - 抱歉。我已经复制了一份代码,并将在明天更新相关更改。我试图从记忆中添加它们(这是个坏主意),但出现了一些奇怪的行为。但是,如果您在此期间查看此处(https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js)并搜索ie8compat,则可能会更好地理解我的意思。所以希望明天能更有帮助 :) - Grozzer

1

值得注意的是,在Stack Overflow上,询问软件/库/教程/文档推荐的问题是不被允许的,因为它们很容易引起垃圾答案。如果可以的话,最好不要回答这些问题。 - halfer

0

嗯……我不确定我会使用那个替代方案……它似乎有点“费时”和“不太容易”做到这一点……如果你知道我的意思。 - pmking
orangesoda.net 似乎已经不存在了。 - Bryan Oakley

0

没错,gridster支持Internet Explorer 9+、Firefox、Chrome、Safari和Opera。
如果您希望支持旧版IE浏览器(6+),为什么不围绕jQuery draggablejQuery droppable构建功能呢?


2
那正是我不想做的事情...我的意思是,Gridster已经是一个完整的、可完全自定义的拖放多列网格。它易于使用,无需涉及大量编程。我只是想知道是否有类似的库适用于旧版本的IE。 - pmking

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接