Gridster 里面的 Gridster

Posted 2023-02-19

【中文标题】Gridster 里面的 Gridster

【英文标题】：Gridster inside Gridster

【发布时间】：2018-08-14 02:51:42

【问题描述】：

我想要嵌套的 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');

我尝试了很多，但完全不知道如何进行此操作。任何形式的帮助都会非常好

【问题讨论】：

如果问题需要更多信息，请随时提问

【参考方案1】：

对我来说，为第二个网格添加一些延迟

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