gridster.js 属性列表

本文将列举 gridster.js 的属性列表及其使用方法。

属性列表

属性名称	说明
resize.enabled	是否允许单元格放大缩小单元格 resize: { enabled: true }
resize.axes	允许缩放宽还是高resize:{axes:['both']} 、resize:{axes:['x']}、resize:{axes:['y']}
resize.handle_class	缩放按钮的样式
resize.handle_append_to	将缩放按钮（句柄）追加到那个元素，css筛选器
resize.max_size	resize.max_size:[10,10]单元格最大允许放大多少行和列
resize.start	开始缩放的事件function(e, ui, $widget) {}
resize.resize	缩放大小时的事件function(e, ui, $widget) {}
resize.stop	停止缩放的事件function(e, ui, $widget) {}
widget_selector	单元格的选择器默认li，可以是css选择器或jquery选择器
widget_margins	单元格之间的间隔默认[10, 10]，单位像素
widget_base_dimensions	单元格最小的大小默认[140, 140]，单位像素
extra_rows	Add more rows to the grid in addition to those that have been calculated.
extra_cols	Add more rows to the grid in addition to those that have been calculated.
max_cols	网格容器（也可以理解成画布）的最大列数
min_cols	网格容器最小列数，最小为1
min_rows	网格容器最小行数
max_rows	网格容器最大的行数
max_size_x	单元格跨是否可以跨越最大列数,默认false
autogenerate_stylesheet	默认是true，在控制台查看你会发现在head前插入了css样式代码，类似 [data-col="1"] { left: 10px; }，这些样式拖动模块的相对位置，如设置为false，你需要手动的定义这些模块的位置（top和left）
avoid_overlapped_widgets	默认true,是否允许堆叠单元格，如果容器最大宽度是3，第一行有2个单元格，每个单元格的宽度是2，如果是true,那么这两个单元格会显示成两行，如果是false,那么这两个单元格显示成一行
serialize_params	使用serialize()方法时会回调这个方法， serialize_params:function($w, wgd) { 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){}
collision.on_overlap_start	function(collider_data) { } A callback for the first time when a widget enters a new grid cell. 被选择的单元格第一次进入一个单元格时的事件
collision.on_overlap	function(collider_data) { } A callback for each time a widget moves inside a grid cell. 一个单元格与另外一个单元格交互时的事件
collision.on_overlap_stop	function(collider_data) { } A callback for the first time when a widget leaves its old grid cell. 两个单元格交互后，离开时的事件

使用方法

//属性的使用方法
 var gridster;
 $(function () {
      // 初始化对象
      gridster = $(".gridster > ul").gridster({
        widget_margins: [15, 15],
        widget_base_dimensions: [100, 100],
        //定义按住样式为.handle才允许拖动
        //css筛选器对象也可以是标签和ID
        draggable: {
          handle: '.handle',
        // 开始拖动的回调函数 www.itxst.com
         start: function (e, ui, $widget) {
          console.log( $widget)
       },
        }
      }).data('gridster');

      var widgets = [
        ['<li><lable class="handle"></lable>0</li>', 1, 2],
        ['<li>1</li>', 3, 2],
        ['<li>2</li>', 3, 2],
        ['<li>3</li>', 2, 1],
      ];
      // 调用add_widget方法
      $.each(widgets, function (i, widget) {
        gridster.add_widget.apply(gridster, widget)
      });
 });

在线试一试