可拖动布局之Gridster
看过bootstrap可视化布局系统的人是不是都会对页面元素的拖拽有着很大的兴趣？下面呢，楼主就给大家讲两个楼主知道的拖拽小插件吧。
一、gridster
1.了解gridster
后续官网：http://dsmorse.github.io/gridster.js/
gridster.js后续的更新：https://github.com/dsmorse/gridster.js
issues: https://github.com/ducksboard/gridster.js/issues
2.官网示例
①动态添加模块(http://dsmorse.github.io/gridster.js/demos/adding-widgets-dynamically.html)：使用add_widget方法，通过数组创建gridster实例。产生的模块自动排列，无需指定相对位置。
②自定义拖拽内容(http://dsmorse.github.io/gridster.js/demos/custom-drag-handle.html)：使用handle定义拖动元素。
③放大悬停(http://dsmorse.github.io/gridster.js/demos/expandable-widgets.html)：使用resize_widget方法悬停时展开模块。
④示例序列化(http://dsmorse.github.io/gridster.js/demos/grid-from-serialize.html)：通过JSON序列生成一个gridster实例[有了这个方法我们就可以方便的从数据库读取用户的模块位置定义]。
⑤同一页面多个Gridster实例(http://dsmorse.github.io/gridster.js/demos/multiple-grids.html)：通过配置参数namespace在同一个页面配置多个gridster实例。
⑥改变模块大小(http://dsmorse.github.io/gridster.js/demos/resize.html)：通过拖动改变模块的大小。
⑦改变模块大小时添加的限制(http://dsmorse.github.io/gridster.js/demos/resize-limits.html)：使用resize.max_size和resize.min_size配置选项或者data-max-sizex，data-max-sizey， data-min-sizex和data-min-sizeyHTML属性调整大小时限制部件的尺寸。如果通过配置选项指定全局max_size，则可以在具有HTML数据属性或使用set_widget_max_size 方法的指定模块中重写
⑧序列化模块位置(http://dsmorse.github.io/gridster.js/demos/serialize.html)：使用serialize方法来获取模块的位置。返回一个可以JSON对象的对象数组。
⑨拖动的回调函数(http://dsmorse.github.io/gridster.js/demos/using-drag-callbacks.html)：拖动模块执行回调函数。
⑩改变模块大小后的回调函数(http://dsmorse.github.io/gridster.js/demos/using-resize-callbacks.html)：可调动模块大小并执行回调函数。
⑪动态网格宽度(http://dsmorse.github.io/gridster.js/demos/dynamic-grid-width.html):使用max_cols选项设置网格最大列
⑫响应式网格宽度(http://dsmorse.github.io/gridster.js/demos/responsive.html)：随屏幕大小变化而变化。
⑬具有较大模块的网格与模块交换点(http://dsmorse.github.io/gridster.js/demos/SwapDrop.html)：shift_larger_widgets_down设置为”false”。
⑭允许模块精确放置在任何位置的网格(http://dsmorse.github.io/gridster.js/demos/sticky-postion.html)
3.Demo
❶需要引入的文件
jquery.js(jQuery文件，gridster官方不提供下载，不多说了-> http://www.jquery.com )
jquery.gridster.js(gridster的主要脚本)
jquery.gridster.css(gridster的样式文件)
❷示例
1 <!Doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>gridster实例</title>
6 <!-- 调用jquery，注意目录位置！ -->
7 <script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>
8 <!-- 调用gridster.js和css，注意放置的目录不要搞错了哦！ -->
9 <script src="./js/jquery.gridster.js" type="text/javascript"
10 charset="utf-8"></script>
11 <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
12 <script>
13 //通过javascript脚本来配置拖动实例，随后我们会讲每个配置参数的意义
14 //首先定义一个变量gridster，为了以后调用gridster的方法
15 var gridster;
16 $(function() {
17 gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
18 widget_base_dimensions : [ 100, 120 ], //模块的宽高 [宽,高]
19 widget_margins : [ 5, 5 ], //模块的间距 [上下,左右]
20 draggable : {
21 handle : \'header\' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
22 }
23 }).data(\'gridster\');
24 });
25 </script>
26 <!-- 当然，除了调用gridster.js和css，你也可以为你的html写一些自己的style -->
27 <style>
28 .gridster ul {
29 margin: 0;
30 }
31
32 .gridster ul li {
33 list-style-type: none;
34 border: 1px solid #e0e0e0;
35 }
36
37 .gridster ul li header {
38 background: none repeat scroll 0% 0% #999;
39 display: block;
40 font-size: 20px;
41 line-height: normal;
42 padding: 4px 0px 6px;
43 margin-bottom: 20px;
44 cursor: move;
45 text-align: center;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="gridster">
51 <ul>
52 <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><header>请点击这里进行拖拽</header>
53 0</li><!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
54 <li data-row="1" data-col="3" data-sizex="1" data-sizey="2"><header>请点击这里进行拖拽</header>
55 1</li>
56 <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
57 2</li>
58 <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"><header>请点击这里进行拖拽</header>
59 3</li>
60 <li data-row="4" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
61 4</li>
62 <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
63 5</li>
64 <li data-row="4" data-col="2" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
65 6</li>
66 </ul>
67 </div>
68 </body>
69 </html>
4.参数及方法介绍
Options
widget_selector
示例：widget_selector: “li”
说明：定义可拖动模块的元素名称，支持css选择器
widget_margins
示例：widget_margins: [10, 10]
说明：模块的边距，第一个参数是上下边距，第二个参数是左右边距。
widget_base_dimensions
示例：widget_base_dimensions: [140, 140]
说明：模块的大小，第一个参数是宽度，第二个参数是高度。以像素为单位
extra_rows
示例：extra_rows: 0/extra_cols: 0
说明：添加行
extra_cols
示例：extra_cols: 0
说明：添加列
max_cols
示例：max_cols: null
说明：设置最大列数。max_cols: null为禁用
min_cols
示例：min_cols: 1
说明：设置最小列数
min_rows
示例：min_rows: 15
说明：设置最小行数
max_size_x
示例：max_size_x: false
说明：模块所占最大列数
autogenerate_stylesheet
示例：autogenerate_stylesheet: true
说明：默认为true，自动将模块的css样式插入到<head>标签中。设置为false时，手动的定义这些模块的位置。就像这样：[data-col=”1″] { left: 10px; }
avoid_overlapped_widgets
示例：avoid_overlapped_widgets: true
说明：设置为true，不允许模块叠加，如果两个模块的位置一样（data-col和data-row来决定），程序会自动调整他们的位置，这样可以防止模块错乱
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()方法时才用到此配置。$w的意思是JQuery的HTML元素，wgd的意思是widget data，gridster通过wgd可以直接取得诸如data-col等的配置，但是如果你想去的模块元素的id，，我们可以通过$w.attr(“id”)获取。
draggable.start
示例：draggable:{start: function(event, ui){}}
说明：拖动开始执行的函数
draggable.drag
示例：draggable:{drag: function(event, ui){}}
说明：拖动过程中鼠标移动时执行的函数
draggable.stop
示例：draggable:{stop: function(event, ui){}}
说明：拖动结束后执行的函数
resize.enabled
示例：resize:{enabled: false}
说明：默认false，设置为true时表示可以拖动模块的右下角改变模块大小
resize.axes
示例：resize:{axes: [\’both\’]}
说明：设置改变模块大小时，鼠标可以向X轴还是Y轴移动，意思就是说你可以设置改变模块大小的宽度还是高度，设置为x只能改变模块宽度，设置为y只能改变高度，设置为both高和宽都可以改变。
resize.handle_class
示例：resize:{handle_class: \’gs-resize-handle\’}
说明：设置改变模块大小时，拖动按钮的css类名称，默认是gs-resize-handle
resize.handle_append_to
示例：resize:{handle_append_to: \’\’}
说明：通过css选择器设置一个元素，这个元素将是拖动按钮的父元素，如果不设置，默认是这个模块（也就是widget_selector的值）
resize.max_size
示例：resize:{max_size: [Infinity, Infinity]}
说明：在改变模块大小的时候，为模块的最大宽高做限制
resize.start
示例：resize:{start: function(e, ui, $widget) {}}
说明：鼠标开始拖动大小的时候执行的函数
resize.resize
示例：resize:{resize: function(e, ui, $widget) {}}
说明：大小一旦改变执行的函数
resize.stop
示例：resize:{stop: function(e, ui, $widget) {}}
说明：鼠标停止调动大小时执行的函数
collision.on_overlap_start
示例：collision:{on_overlap_start: function(collider_data) { }}
说明：模块首次进入新网格单元时的回调。
collision.on_overlap
示例：collision:{on_overlap: function(collider_data) { }}
说明：模块在网格单元内移动时的回调。
collision.on_overlap_stop
示例：collision:{on_overlap_stop: function(collider_data) { }}
说明：模块首次离开旧网格单元时的回调。
Methods
.add_widget( html, [size_x], [size_y], [col], [row] )
参数：
html String | HTMLElement
表示模块的节点或字符串将被添加。
size_x 数字
模块占用的行数。默认为1。
size_y 数字
模块占用的列数。默认为1。
col 数字
模块应该启动的列。
row 数字
模块应该开始的行。
说明：用给定的html创建一个新的模块并将其添加到网格中。返回表示已调整大小的模块的节点。
.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
参数：
$ widget HTMLElement
模块将被调整大小。
size_x 数字
模块将要跨越的行数。默认为当前size_x。
size_y 数字
模块要跨越的列数。默认为当前size_y。
reposition 布尔值
如果右侧没有足够的空间，则设置为false以不移动窗口模块到左侧。默认情况下size_x，仅限于模块开始处的列可用空间，直到最后一列位于右侧。
说明：更改模块的大小。宽度限制为当前网格宽度。返回表示已调整大小的模块节点。
.remove_widget( el, [callback] )
参数：
EL HTMLElement
你想要移除的模块节点。
回调函数
模块被移除时的回调。
说明：从网格中移除一个模块。返回Gridster类的实例。
.serialize( [$widgets] )
参数：
$ widgets HTMLElement
序列化的节点。如果没有参数传递，所有的模块都会被序列化。
说明：创建一个对象数组，表示网格中所有模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。
.serialize_changed( )
说明：创建一个对象数组，表示已更改位置的模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。
.enable( )
说明：启用拖动。返回Gridster类的实例。
.disable( )
说明：禁用拖动。返回Gridster类的实例。