pmk*_*ing 20 javascript grid jquery animation drag-and-drop
我已经将Gridster库用于使用拖放多列网格的项目.遗憾的是,Gridster仅支持Internet Explorer 9+.我需要找到一个类似的简单易用的库,它允许我使用IE8做同样的事情,如果它也可以兼容IE7和IE6.
那么,对于旧IE来说,有没有类似Gridster的库？我在这个项目中使用jquery,所以一个基于jquery的库也可能很棒.
PS我发现了一个名为AnimaDrag的东西,但它不如Gridster好,而且有点糟糕.
Jec*_*imi 20
还有Shapeshift:https://github.com/McPants/jquery.shapeshift
和Gridly:http://ksylvest.github.io/jquery-gridly/
这是Gridster的好选择.(但请注意,Gridly仅适用于方形瓷砖)
编辑:Packery也很有趣:http://packery.metafizzy.co/ .但是,它需要商业项目的商业许可证,否则:
对于非商业,个人或开源项目和应用程序,您可以根据GPL v3许可条款使用Packery.
编辑2:这个也可能有用:https://github.com/uberVU/grid
Jav*_*ier 14
您可以试试Gridstack:https://github.com/troolee/gridstack.js 这是一个早期版本,但严格基于gridster,它也是响应.
[NB我在有关提出的类似问题的项目的github页面上发布了这个答案.所以检查一下,以防这个答案得到纠正! - https://github.com/ducksboard/gridster.js/issues/74]
过去几天我花了类似的问题 - 虽然我只需要IE8支持(虽然它似乎在IE7中工作).问题是代码正在更新页面,但IE不会在鼠标移动时拾取/评估数据行和数据列更改.我尝试了上面的解决方案中的几个东西,直到使用modernizr和类似的库,最后尝试绑定到IE只有'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的行更改为:
没错，gridster 支持 Internet Explorer 9+、Firefox、Chrome、Safari 和 Opera。
如果您希望支持较旧的 IE 浏览器 (6+)，为什么不围绕jQuery Draggable和jQuery Droppable构建功能