gridster.js 交换模式

gridster.js 设置shift_larger_widgets_down 为 false 时可以开启交换模式,所谓的交换模式，当往下拖动1个单元格时，遇到比它大的单元格不会把这个大的单元格挤到更下面去。比如在我们的在线例子里面，你把编号为1的单元格拖到3的单元格下面就可以看出效果，对比一下shift_larger_widgets_down 为 false或true的效果。

交换模式

var gridster = [];
var serialization = [
  { row: 1, col: 1, size_x: 1, size_y: 1 },
  { row: 1, col: 2, size_x: 1, size_y: 1 },
  { row: 2, col: 1, size_x: 4, size_y: 1 },
];

var serialization2 = [
  { row: 1, col: 1, size_x: 1, size_y: 1 },
  { row: 1, col: 2, 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 () {
  //初始化 gridster1 对象
  gridster[0] = $(".g1 ul").gridster({
    namespace: '.g1',
    widget_base_dimensions: [150, 150],
    widget_margins: [5, 5],
    //交换模式
    shift_larger_widgets_down: true,
    resize: {
      enabled: true
    }
  }).data('gridster');

  //初始化 gridster2 对象
  gridster[1] = $(".g2 ul").gridster({

    namespace: '.g2',
    widget_base_dimensions: [150, 150],
    //交换模式
    shift_larger_widgets_down: false,
    widget_margins: [5, 5],
    resize: {
      enabled: true
    }
  }).data('gridster')
  //第1个 gridster 容器
  $.each(serialization, function (index) {
    gridster[0].add_widget('<li>' + (index + 1) + '</li>', this.size_x, this.size_y, this.col, this.row);
  });
  //第2个 gridster 容器
  $.each(serialization2, function (index) {
    gridster[1].add_widget('<li>' + (index + 1) + '</li>', this.size_x, this.size_y, this.col, this.row);
  });

});

在线试一试