gridster.js 展开选中单元格

gridster.js 通过 resize_widget 方法展开选中单元格，实现鼠标悬浮在单元格上放大单元格的效果。

展开选中单元格

    var gridster;
    $(function () {
      // 初始化对象
      gridster = $(".gridster > ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 55]
      }).data('gridster');

      var widgets = [
        ['<li>0</li>', 2, 2],
        ['<li>1</li>', 2, 2],
        ['<li>2</li>', 2, 2],
      ];
      // 调用add_widget方法
      $.each(widgets, function (i, widget) {
        gridster.add_widget.apply(gridster, widget)
      });

      // www.itxst.com
      gridster.$el.ready(function () {
        // 单元格hover事件
        gridster.$el.on('mouseenter', 'li', function () {
          console.log(this);
          gridster.resize_widget($(this), $(this).data("sizex") + 1, $(this).data("sizey") + 1);
        })
          .on('mouseleave', 'li', function () {
            gridster.resize_widget($(this), 2, 2);
          });

      });
    });

在线试一试