我使用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>
Run Code Online (Sandbox Code Playgroud)
这是 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 …Run Code Online (Sandbox Code Playgroud)