gridster.js 中文文档

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_sizeresize.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_rowsAdd more rows to the grid in addition to those that have been calculated.
extra_colsAdd 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_overlapfunction(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)
      });
 });

在线试一试

Catalog
快速入门 Usage gridster.js 属性列表 gridster.js 方法列表 序列化创建网格 修改单元格大小 动态添加单元格 自定义拖拽句柄 展开选中单元格 拖动相关回调函数 缩放相关回调函数 响应式布局网格 交换模式 限制单元格大小 一个网页多个实例