Question

我使用gridstack.js来显示＆＃34;布局＆＃34;对用户来说，他们可以构建一个广告页面，虽然我可以在调整大小后调整单元格的宽度和高度，但只要调整大小，就可以再次调整单元格的大小迷路了。这是我的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>');
});

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

我希望用户在调整＆＃34;单元格＆＃34;之后（或同时）看到新的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示例。

jQuery gridstack.js插件：get＆＃34; cell＆＃34;宽度和高度，但保持可调整大小

1 个答案: