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>

在线试一试

属性说明

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(){
     // 删除完成回调函数
 });

在线试一试