前端拖拽插件gridster.js

使用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>

四、效果截图：

第一张图是最开始的状态，第二张图是拖拽后的状态。鼠标移入，可以看到右下角有个小角标可以进行调整大小。

前端拖拽插件gridster.js

猜你喜欢