Javascript 嵌套网格

当我嵌套两个gridster（）时，当我尝试在内部gridster内的元素周围拖动时，占位符的大小与外部gridster的大小成比例，我如何解决这个问题

HTML：

<div id="demo-1" class="gridster">
        <ul id="grid1">
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0
                <div id="demo-2" class="">
                    <ul id="grid2">
                        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2" class="items2">0</li>
                        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="items2">1</li>
                        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="items2">2</li>
                        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1" class="items2">3</li>
                        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="items2">4</li>
                        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="items2">5</li>
                        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" class="items2">6</li>
                        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="items2">7</li>
                        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1" class="items2">8</li>
                    </ul>
                </div>
            </li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
        </ul>
    </div>

---

问题在于基于名称空间选项生成CSS规则的方式

因此，在上面的示例

名称空间：'#demo-1'

中，会产生如下CSS类

#demo-1[data sizex=“2”{宽度：210px；}

类似地，

名称空间：“#demo-2”

会导致

#demo-2[data sizex=“2”]{width:44px；}

对于

ul#grid2 li

，上述两个CSS规则具有相同的首选项，因此所应用规则的首选项取决于规则出现的顺序。在本例中，我们在grid2之前初始化grid1，因此首先生成grid1的CSS规则，然后生成grid2

因此，在初始化grid2时，首先创建

coords

对象，在该点使用grid1的宽度和高度

解决方案： 将

名称空间：'#demo-2'

更改为

名称空间：'#demo-1#demo-2'

并在grid1之前对其进行初始化，同时正确设置

小部件选择器

选项

        gridster1 = $("#demo-2 > ul#grid2").gridster({
            namespace: '#demo-1 #demo-2',
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
            widget_selector: ".items2",
            draggable: {
                items: ".items2"
            }
        }).data('gridster');

        gridster0 = $("#demo-1 > ul#grid1").gridster({
            namespace: '#demo-1',
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
            widget_selector: ".items1"
        }).data('gridster');

        gridster1 = $("#demo-2 > ul#grid2").gridster({
            namespace: '#demo-1 #demo-2',
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
            widget_selector: ".items2",
            draggable: {
                items: ".items2"
            }
        }).data('gridster');

        gridster0 = $("#demo-1 > ul#grid1").gridster({
            namespace: '#demo-1',
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
            widget_selector: ".items1"
        }).data('gridster');