jQuery gridstack.js 插件：获取“单元格”宽度和高度，但保持其可调整大小

Question

我使用gridstack.js向用户显示“布局”，以便他们可以构建广告页面，虽然我能够在调整大小后获取单元格的宽度和高度，但调整大小完成后，再次调整单元格大小的能力将会丢失。这是我的 HTML 代码：

<div class="row">
  <div class="col-sm-12">
    <div class="editable">
      <div class="grid-stack">
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">2 x 2</div>
        </div>
        <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="3" data-gs-height="4">
          <div class="grid-stack-item-content">3 x 4</div>
        </div>
      </div>
    </div>
  </div>
</div>

这是 JavaScript：

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

$('.grid-stack-item').on('resizestop', function() {
  var node = $(this).data('_gridstack_node');

  if(typeof node == undefined) {
      return;
  }

  $(this).html('<div class="grid-stack-item-content ui-draggable-handle">' + node.width + ' x ' + node.height + '</div>');
});

我最初是通过调用widthand来获取and的，但它只会保留原始属性，而不保留更新的属性（即使代码会更改）。height$(this).data('gsWidth')$(this).data('gsHeight')HTML

我希望用户W x H在调整“单元格”大小之后（或同时）看到新值，但它不起作用。

这是一个 JSFiddle 示例，以便您可以看到发生了什么（确保您的浏览器窗口足够大）：

http://jsfiddle.net/divspace/zsstqhee/

Answer 1

我已经使用 Gridstack.js 一段时间了，并决定用答案更新这个问题。这是更新后的 JavaScript：

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

var grid = $('.grid-stack').data('gridstack');

$('.grid-stack-item').on('resizestop', function() {
  var gridCell = $(this),
      node = $(this).data('_gridstack_node');

  if(typeof node == undefined) {
    return;
  }

  grid.update(gridCell, node.x, node.y, node.width, node.height);

  $(this).find('.grid-stack-item-content').text(node.width + ' x ' + node.height);
});

以及一个有效的JSFiddle示例。