插件描述：网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件。
Gridster.js
主要特性
只依赖 jQuery
支持元素的添加和删除
文档比较全
拥有测试用例，你可以查看你的浏览器的测试结果
比较适合开发益智游戏
如何使用
引入类库，包括 jQuery 和 gridster.js
1 2 | <script type="text/javascript" src="js/jquery.gridster.min.js"></script> |
然后导入 Gridstrer 的 CSS 文件：
1 | <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css"> |
HTML内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li> </ul></div> |
注意 gridster.js 使用 HTML5 的 data 属性来定义相关的拖放元素属性，data-row 为行号，data-col 为列号，data-sizex 为 X 轴元素宽度，datasizey 为 Y 轴元素宽度。
最后调用插件 JS，代码如下：
1 2 3 4 5 6 | $(function() { $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] });}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 滑块进度插件，条纯js实现（原创），可实例多个
- 下一个特效： jquery 弹框+模态框+消息提示（原创）