gridster.js–可拖拽的网格插件

gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局，支持多列布局，你还可以动态的添加和删除表格中的元素。

\

主要特性

1.只依赖jQuery

2.支持元素的添加和删除

3.文档比较全

4.拥有测试用例，你可以查看你的浏览器的测试结果

5.比较适合开发益智游戏

如何使用

引入类库，包括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 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，代码如下：

$(".gridster ul").gridster({
 widget_margins: [10, 10],
 widget_base_dimensions: [140, 140]
});

这里是通过创建的属性来设定每一个区域的大小及定位,所涉及的属性如下：
data-row:数据行，元素所存在的行数。
data-col:数据列，元素所存在的列数。
data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）
data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）
例：widget_base_dimensions: [150, 150]
那么每个元素块的宽/高分别为150px/150px
注：元素块合并时的宽度并不只是两个元素块之和
即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
高度={data-sizey=”1″}=元素块X1==150*1=150px

这里我们只需要设定两个数值，宽高/边距；如
widget_margins:
设置网格之间的外边距；所传的数值是实际像素的2倍，如[2,2]==[4px,4px]=[右边距，下边距]。
widget_base_dimensions:
设置网格的宽高；所传的数值=实际像素，如[150,150]==[150px,150px]=[width,height]。

演示 - 文档 - 下载