页面效果
拖动后效果
具体实现：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EasyUI Draggable 测试Demo</title>
<link rel="stylesheet" type="text/css"
href="homePage/css/jquery.gridster.min.css">
<link rel="stylesheet" href="homePage/css/style.css">
<script type="text/javascript" src="homePage/js/jquery-1.7.2.min.js"></script>
<script src="homePage/js/jquery.gridster.js" type="text/javascript"></script>
</head>
<body>
<div class="demo">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="2"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
</ul>
</div>
</div>
<script>
var gridster;
$(function() {
gridster = $(".gridster > ul").gridster({
widget_margins : [ 10, 10 ],
widget_base_dimensions : [ 150, 140 ],
min_cols : 4
}).data('gridster');
});
</script>
</body>
</html>案例代码下载链接：
http://www.datouwang.com/jiaoben/761.html
参数及方法介绍（参考自 ）
1.data-row:数据行，元素所存在的行数。
2.data-col:数据列，元素所存在的列数。
3.data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）
4.data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）
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类的实例。
