我想要嵌套的gridster(gridster indside gridster)。类似于Nested Gridstack
为此,我通过阅读一些在线内容编写了我的Gridster代码。但是我没有得到预期的结果。
HTML代码
<div id="demo1" class="gridster">
<ul id="grid1">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>1</h3></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>2</h3></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>3</h3></li>
<div id="demo-2">
<ul id="grid2">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>1</h3></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>2</h3></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>3</h3></li>
</ul>
</div>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>10</h3></li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>11</h3></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>12</h3></li>
</ul>
</div>
JS代码
gridster1 = $("#demo-2 > ul#grid2").gridster({
widget_base_dimensions: [20, 10],
widget_margins: [2, 2],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
gridster0 = $("#demo-1 > ul#grid1").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
我尝试了很多,但完全不知道如何继续这个。任何形式的帮助都会非常好
答案 0 :(得分:0)
对我来说,为第二个网格增加一些延迟
setTimeout(function() {
gridster1 = $("#demo-2 > ul#grid2").gridster({
widget_base_dimensions: [20, 10],
widget_margins: [2, 2],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
},1000);
gridster0 = $("#demo-1 > ul#grid1").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');