gridster.js 缩放相关的回调函数

gridster.js 缩放相关的回调函数,开始缩放 start、缩放中 resize、停止缩放 stop。

缩放回调函数

var gridster;
var serialization = [
  { row: 1, col: 1, size_x: 1, size_y: 1 },
];
// sort serialization
serialization = Gridster.sort_by_row_and_col_asc(serialization);
var log = document.getElementById('log');
$(function () {
  //初始化 gridster 对象
  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [150, 150],
    widget_margins: [5, 5],
    resize: {
      enabled: true,
      //开始缩放
      start: function (e, ui, $widget) {
        log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
      },
      //缩放中
      resize: function (e, ui, $widget) {
        log.innerHTML = 'Resize offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML;
      },
      //停止缩放
      stop: function (e, ui, $widget) {
        log.innerHTML = 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
      }
    }
  }).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);
  });

});

在线试一试