使用gridster.js必须引用三个文件：
1.jquery.js(jQuery文件 )
2.jquery.gridster.js(gridster的主要脚本)
3.jquery.gridster.css(gridster的样式文件)
可以去官网下载，也可以直接引用cdn.
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.js"></script>
<link href="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet">
一、首先是html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.js"></script>
<link href="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet">
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
<header>|||</header>
0
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<header>|||</header>
1
</li>
<li data-row="3" data-col="1" data-sizex="3" data-sizey="2">
<!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
<header>|||</header>
3
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<header>|||</header>
2
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="2">
<header>|||</header>
4
</li>
</ul>
</div>
</body>以上代码中，
data-row: 元素所在行数 data-col：元素所在列数
data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）
data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）
data-row和data-col是在设置元素块的位置的，而data-sizex和data-sizey是设置元素块大小的。
二、ｃｓｓ样式:除了引用的css外，还可以自己进行设置样式,如下：
<style>
.gridster ul{margin:0;}
.gridster ul li{list-style-type:none;border:1px solid #e0e0e0;text-align: center;}
.gridster ul li header{background:#999;display: block;font-size: 20px;line-height: normal;padding: 4px 0px 6px;margin-bottom: 20px;cursor: move;text-align:center;}
</style>三、脚本ｊｓ:这一部分主要是对gridster的参数进行配置，达到自己想要的效果。
如果只是实现拖拽功能，不需要resize设置，resize主要是调整大小的。
<script>
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions:[100,100], //模块宽高[宽，高]
widget_margins:[5,5], //模块间距[上下，左右]
draggable:{
handle:'header' //拖动元素
},
resize:{
enabled:true
}
}).data('gridster');
})
</script>四、效果截图：
第一张图是最开始的状态，第二张图是拖拽后的状态。鼠标移入，可以看到右下角有个小角标可以进行调整大小。
转播
