html可拉动页面布局,jQuery div网格布局可拖动实现自由布局

此功能参考http://www.datouwang.com/jiaoben/761.html中的资源，感谢！

此参数的说明参考自https://www.cnblogs.com/JealousGirl/p/useGridster.html，感谢！

页面效果

拖动后效果

具体实现：

EasyUI Draggable 测试Demo

href="homePage/css/jquery.gridster.min.css">

var gridster;

$(function() {

gridster = $(".gridster > ul").gridster({

widget_margins : [ 10, 10 ],

widget_base_dimensions : [ 150, 140 ],

min_cols : 4

}).data('gridster');

});

案例代码下载链接：

参数及方法介绍(参考自https://www.cnblogs.com/JealousGirl/p/useGridster.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样式插入到

标签中。设置为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类的实例。