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) {}}
说明:停止改变大小(释放鼠标)执行的函数