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]。