gridster.js 拖动相关的回调函数

gridster.js 拖动相关的回调函数，本文将演示 start、drag、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
    },
    draggable: {
      // 开始拖动的回调函数 www.itxst.com
      start: function (e, ui, $widget) {
        log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
      },
      // 拖动中的回调函数
      drag: function (e, ui, $widget) {
        log.innerHTML = 'DRAG 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);
  });

});

在线试一试