gridster.js配置参数详解

转载：gridster.js配置参数详解

JavaScript代码 

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

2.  //以下开始配置参数

3.             widget_base_dimensions: [100, 120],

4.              widget_margins: [5,5],

5.              draggable: {

6.               handle: 'header'

7.              }

8.          }).data('gridster');

 

其中widget_base_dimensions、widget_margins、draggable都是配置参数，接下来把gridster所有可用参数讲一遍（英文官方文档：http://gridster.net/#documentation）。

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]
说明：每个模块的基本单位的宽度和高度，拖动或者改变大小都会以这个宽高为一个单位来改变。

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

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()方法时才用到此配置，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'}
说明：设置改变模块大小时，拖动按钮的classname，默认是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) {}}
说明：停止改变大小（释放鼠标）执行的函数

 

补充 by xiangm 2016-12-14

autogrow_cols

示例：autogrow_cols: true

说明：是否允许列自增，若允许，则可将模块向右拖动，会出现滚动条，若不允许，则向右拖动时到浏览器窗口边界（？）时便不能再拖动。

 

min_cols

示例：min_cols: 2

说明：模块最小宽度

 

max_cols

示例：max_cols: 6

说明：模块最大宽度

示例：

Sticky position widgets.

Widgets can be moved to an exact postion on the grid and the grid will not attempt to collapse it down to a smaller size.  Also widgets will not move out of the way automatically, but will move only on mouse up

    shift_widgets_up: false,    shift_larger_widgets_down: false,    collision: {        wait_for_mouseup: true    }

shift_widgets_up

类型：Boolean (optional)

说明：Determines if the player will automatically condense the grid and not allow a widget to have space above it. Defaults to true.

shift_larger_widgets_down

类型：Boolean (optional)

说明：Determines if how widgets get pushes out of the way of the player. If set to false smaller widgets will not move larger widgets out of their way . Defaults to true.

collision

类型：Object (optional)

说明：An Object with all options for Collision class you want to overwrite. See Collision docs for more info.

        wait_for_mouseup

        类型：Boolean (optional)

        说明：Default is false. If true then it will not move colliding widgets during drag, but only on mouseup.