Javascript jQuery gridstack.js插件：get"；单元格“；宽度和高度，但保持大小可调

我用它来向用户显示“布局”，这样他们就可以构建广告页面，虽然我可以在调整单元格大小后获得单元格的宽度和高度，但一旦调整完毕，就无法再次调整单元格大小。以下是我的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>

2x2
3 x 4

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

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

$（'.grid stack'）.gridstack({
宽度：16，
身高：16，
单元高度：60，
垂直_边距：20，
动画：对，
始终\u显示\u调整大小\u句柄：真
});
$（'.grid stack item'）。在（'resizestop'，function（）上{
var node=$（this）.data（“网格堆栈\节点”）；
if（节点类型==未定义）{
返回；
}
$（this.html（''+node.width+'x'+node.height+''）；
});

我最初通过调用

$（this.data（'gsWidth'）

和

$（this.data（'gsHeight'））

来获取

宽度和
高度，但它只保留原始属性，而不保留更新的属性（即使
HTML
代码会更改）

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

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

我已经玩了一段时间Gridstack.js，决定用答案更新这个问题。以下是更新后的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>');
});

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

这是一个有效的例子