gridster.js多列网格式拖动布局jquery插件——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
gridster.js多列网格式拖动布局jquery插件

发布作者:萧强   发布时间:2015-10-08   阅读次数:7230

网页中拖动div是很常见的操作,今天就分享给大家一个jquery多列网格拖动布局插件,和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小,并且支持多列的网格布局,它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的html元素转换为网格组件。

运行效果如下:



GridSter

主要特性

  • 只依赖jQuery
  • 支持元素的添加和删除
  • 文档比较全
  • 拥有测试用例,你可以查看你的浏览器的测试结果
  • 比较适合开发益智游戏

如何使用

引入类库,包括jQuery和gridster.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>

然后导入gridstrer的css文件:

<link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">
HTML内容如下:

<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,代码如下:

$(function() {
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
});
项目地址:http://www.gridster.net/



本文系作者 JJsheji 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

本文链接:http://www.w3cdream.com/content-sort-10-article-509.html

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

JQuery新手练习场

热点文章

新闻资讯

标签云

友情赞助