前端拖拽插件gridster.js

来源：互联网发布：json解析html标签编辑：程序博客网时间：2024/05/24 06:39

gridster.js是一款基于jquery的前端拖拽插件，由于最近项目改进，我发现这个插件很适合，所以研究了起来。以下是学习这个插件的收获。

英文官方文档 http://gridster.net/#download

参考文章 http://cloudbbs.org/forum.php?mod=viewthread&tid=26565

http://cloudbbs.org/forum.php?mod=viewthread&tid=26508

一个简单例子（也就是英文官方文档 http://gridster.net/#download里Demo前面的那幅拖拽图代码）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="author" content="stev" />
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.gridster.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.gridster.js" charset="utf-8"></script>
</head>
<style>
body{
font-family: Helvetica, arial, sans-serif;
margin:10px auto;
background: #004756;
color: #fff;
font-size: 12px;
width:940px;
}

h1{
padding:10px;
font-size: 38px;
}

ul{
list-style: none;
}

li{
background-color: white;
cursor: pointer;
color:#000;
}
</style>
<script type="text/javascript">
//gridster把每一块称为widget（窗口小部件）
$(document).ready(function(){
gridster = $(".gridster ul").gridster({
//widget_selector: "li", //确定哪个元素是widget
widget_margins: [6, 6], //margin大小
widget_base_dimensions: [140, 140], //面积大小
// if(width>1000){
// widget_base_dimensions: [140, 140]
// }else{
// widget_base_dimensions: [100, 100]
// },
//extra_rows: 0, //增加更多的横数确保空隙合适
//extra_cols: 0, //增加更多的列数确保空隙合适

max_size_x: 3, //一个widget最大多少列
max_size_y: 3, //一个widget最大多少横

//max_cols: null, //最多创建多少列，null表示没有限制
//max_rows: null, //最多创建多少横，null表示没有限制
//min_cols: 1, //至少创建多少列
//min_rows: 15, //至少创建多少横

//autogenerate_stylesheet: true, //允许通过CSS自动生成，例如：[data-col="1"] { left: 10px; }
//avoid_overlapped_widgets: true, //不允许widgets加载的时候重叠

//resize.enabled: false,//允许改变大小
//resize.axes: ['both'], //能通过X,Y轴去改变大小
//resize.handle_class: 'gs-resize-handle', //把某个class当做改变大小的控件
//resize.handle_append_to: '',//set a valid CSS selector to append resize handles to. If value evaluates to false it's appended to the widget.
//resize.max_size: [Infinity, Infinity], //改变大小的最大值

// helper:'clone',

// resize:{
// enabled: true
// },

/*serialize_params: function($w, wgd) { //返回序列化后widget的数据
return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y }
}*/

//draggable.start: function(event, ui){}, //拖动事件
//draggable.drag: function(event, ui){},
//draggable.stop: function(event, ui){},
//用法：
// draggable:{
// handle: '', //设置拖动控件
// start: function(event, ui){
// },
// drag:function(event, ui){
// },
// stop: function(event, ui){
// }
// }

//collision.on_overlap_start: function(collider_data) { }, //碰撞/交互事件
//collision.on_overlap: function(collider_data) { },
//collision.on_overlap_stop: function(collider_data) { },

//resize.start: function(e, ui, $widget) {}, //改变大小事件
//resize.resize: function(e, ui, $widget) {},
//resize.stop: function(e, ui, $widget) {},

}).data('gridster');

//var gridster = $(".gridster ul").gridster().data('gridster');//获取对象
//alert("row:"+gridster.rows+"--cols"+gridster.cols);

//gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);//增加一个
//gridster.remove_widget( $('.gridster li').eq(0) ); //删除第4块,0开始算起

//var json = gridster.serialize();
//alert(JSON.stringify(json));

//gridster.disable( );//禁止拖动
//gridster.enable( );

/* gridster.$el //增加事件
.on('mouseenter', '> li', function() {
gridster.resize_widget($(this), 3, 3);
})
.on('mouseleave', '> li', function() {
gridster.resize_widget($(this), 1, 1);
});*/
});
</script>
<body>
<article>
<h1>GridSter Demo (li)</h1>
<section>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="gs-w">1</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="gs-w">2</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs-w">3</li>

<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="gs-w">4</li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2" class="gs-w">5</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs-w">6</li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1" class="gs-w">7</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs-w">8</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs-w">9</li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs-w">10</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs-w">11</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs-w">12</li>
</ul>
</div>
</section>
</article>
</body>
</html>

主要参数说明：

1.widget_selector
示例：widget_selector:"li"
说明：widget_selector用了配置一个girdster里面可拖动模块的html元素名称，支持css选择器，如:widget_selector:"div.drag > .items"。

2.widget_margins
示例：widget_margins:[10,10]
说明：模块的边距，第一个参数是上下边距，第二个参数是左右边距。

3.widget_base_dimensions
示例：widget_base_dimensions:[140,140]
说明：每个模块的基本单位的宽度和高度，拖动或者改变大小都会以这个宽高为一个单位来改变。

4.autogenerate_stylesheet
示例：autogenerate_stylesheet: true
说明：默认是true，用控制台查看你会发现在head结束前插入了<style>样式代码，大概是这样 [data-col="1"] { left: 10px; }，这些决定了拖动模块的相对位置，如果设置为false，你就要手动的定义这些模块的位置（top和left）

5.avoid_overlapped_widgets
示例：avoid_overlapped_widgets: true
说明：设置为true，不允许模块叠加，如果两个模块的位置一样（data-col和data-row来决定），程序会自动调整他们的位置，这样可以防止模块错乱。

6.serialize_params
示例：serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y } }
说明：自定义配置序列化的格式，这个函数的返回值将作为返回数组的一个元素，每个模块生成一个元素。使用serialize()方法时才用到此配置，wgd的意思是widget data，gridster通过wgd可以直接取得诸如data-col等的配置，但是如果你想去的模块元素的id，，我们可以通过$w.attr("id")获取。

7.draggable.start
示例：draggable.start: function(event, ui){}
说明：拖动开始执行的函数

8.draggable.drag
示例：draggable:{drag: function(event, ui){}}
说明：拖动过程中鼠标移动时执行的函数

9.draggable.stop
示例：draggable:{stop: function(event, ui){}}
说明：拖动结束后执行的函数

10.resize.enabled
示例：resize:{enabled: false}
说明：默认false，设置为true时表示可以拖动模块的右下角改变模块大小

11.resize.axes
示例：resize:{axes: ['both']}
说明：设置改变模块大小时，鼠标可以向X轴还是Y轴移动，意思就是说你可以设置改变模块大小的宽度还是高度，设置为x只能改变模块宽度，设置为y只能改变高度，设置为both高和宽都可以改变。

12.resize.handle_class
示例：resize:{handle_class: 'gs-resize-handle'}
说明：设置改变模块大小时，拖动按钮的classname，默认是gs-resize-handle

13.resize.handle_append_to
示例：resize:{handle_append_to: ''}
说明：通过css选择器设置一个元素，这个元素将是拖动按钮的父元素，如果不设置，默认是这个模块（也就是widget_selector的值）

14.resize.max_size
示例：resize:{max_size: [Infinity, Infinity]}
说明：在改变模块大小的时候，为模块的最大宽高做限制

15.resize.start
示例：resize:{start: function(e, ui, $widget) {}}
说明：鼠标开始拖动大小的时候执行的函数

16.resize.resize
示例：resize:{resize: function(e, ui, $widget) {}}
说明：大小一旦改变执行的函数

17.resize.stop
示例：resize:{stop: function(e, ui, $widget) {}}
说明：停止改变大小（释放鼠标）执行的函数

0 0