gridster.js 中文文档

gridster.js 是一款前端网格拖拽插件可以实现 Windows 磁贴效果我们可以用来做自定义工作台的拖拽效果，Gridster 支持 IE 9+ Firefox Chrome Safari 和 Opera浏览器。

官方网站

https://github.com/dsmorse/gridster.js

安装方式

npm install dsmorse-gridster --save

文件下载

如果你不想通过npm命令安装，也可以直接下载文件
下载 gridster.js

引用方式

<link href="https://www.itxst.com/package/gridster/jquery.dsmorse-gridster.min.css" rel="stylesheet" type="text/css" >
<script src="https://www.itxst.com/package/gridster/jquery.min.js"></script>
<script src="https://www.itxst.com/package/gridster/jquery.dsmorse-gridster.min.js"></script>

简单入门代码

<div class="gridster">
    <ul>
      <!--起始位置 第1行第1列 宽度 x轴占3列 y轴占1行-->
      <li data-row="1" data-col="1" data-sizex="3" data-sizey="1">0</li>
      <!--起始位置 第1行第4列 宽度 x轴占1列 y轴占1行,注意列的起始位置-->
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">1</li>
      <!--起始位置 第2行第1列 宽度 x轴占4列 y轴占1行-->
      <li data-row="2" data-col="1" data-sizex="4" data-sizey="1">2</li> 
    </ul>
  </div> 
  <script type="text/javascript">
    var gridster;
    $(function () {
     //初始化 gridster 对象
      gridster = $(".gridster ul").gridster({
        //每个单元格最小的宽高 单位像素
        widget_base_dimensions: [150, 150],
        //单元格之间的距离
        widget_margins: [5, 5],
        //是否可以放大缩小单元格
        resize: {
          enabled: true
        }
      }).data('gridster');
    });
 </script>

在线试一试

动态创建单元格

<script type="text/javascript">
    var gridster;
    //注意第2个单元格位置是第一个单元格位置上堆叠上去的
    var serialization = [
      { row: 1, col: 1, size_x: 3, size_y: 1 },
      { row: 1, col: 4, size_x: 1, size_y: 1 },
      { row: 2, col: 1, size_x: 4, size_y: 1 },
    ];
    // sort serialization
    serialization = Gridster.sort_by_row_and_col_asc(serialization);

    $(function () {
      //初始化 gridster 对象
      gridster = $(".gridster ul").gridster({
        //每个单元格最小的宽高 单位像素
        widget_base_dimensions: [150, 150],
        //单元格之间的距离
        widget_margins: [5, 5],
        //是否可以放大缩小单元格
        resize: {
          enabled: true
        }
      }).data('gridster');
      
      gridster.remove_all_widgets();
      $.each(serialization, function (index) {
        gridster.add_widget('<li>' + (index+1) + '</li>', this.size_x, this.size_y, this.col, this.row);
      });
    });
</script>

在线试一试

属性说明

属性名称	说明
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. 两个单元格交互后，离开时的事件

add_widget 方法

//需要插入的元素 可以是字符串也可以是jquery对象
var el = "<li>add_widget</li>";
// 起始列
var col = 1;
// 起始行
var row = 2;
// 占4列
var size_x = 4;
// 占1行
var size_y = 1;
//在第1列第2行，占4列占1行插入元素
gridster.add_widget(el, size_x, size_y, col, row);

在线试一试

resize_widget 方法

/*
.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
// reposition(测试了一下这个参数似乎没有效果)
     设置为false，如果右侧空间不足，则不将小部件移动到左侧。默认情况下，
     x的大小限制为从小部件开始的列到右边最后一列的可用空间。
*/

// 占4列
var size_x = 3;
// 占1行
var size_y = 1;
// 改变第1个元素的大小,不管设置第三个参数 true false都会把第2个单元格挤下去
// 应该插件有BUG
gridster.resize_widget(gridster.$widgets.eq(0),size_x, size_y,true);

//下面第2个单元格不会挤下去
//gridster.expand_widget(gridster.$widgets.eq(1), 1, 1, 4);
//gridster.resize_widget(gridster.$widgets.eq(0), size_x, size_y, true);

// 可以参考英文文档
// http://dsmorse.github.io/gridster.js/docs/classes/Gridster.html

在线试一试

remove_widget 方法

/*
.remove_widget( el, [callback] )
*/
//删除第一个单元格
 gridster.remove_widget(gridster.$widgets.eq(0),function(){
     // 删除完成回调函数
 });

在线试一试