javascript - jQuery gridstack.js 插件 : get "cell" width and height but keep it resizable

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>');
});

我最初是通过调用 $(this).data('gsWidth') 和 获得 width 和 height $(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示例。