使用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样式:除了引用的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>
三、脚本js:这一部分主要是对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>
四、效果截图:
第一张图是最开始的状态,第二张图是拖拽后的状态。鼠标移入,可以看到右下角有个小角标可以进行调整大小。