2

2 つのグリッドスター ( http://gridster.net/ ) をネストし、内側のグリッドスター内の要素をドラッグしようとすると、プレースホルダーのサイズが外部グリッドスターのサイズに比例します。これを修正するにはどうすればよいですか?

http://jsfiddle.net/YS4Ce/

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>

Javascript:

    var gridster0 = null;
    var gridster1 = null;

    $(function() {

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

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


    });
4

1 に答える 1

3

問題は、名前空間オプションに基づいて CSS ルールが生成される方法にあることがわかりました。

したがって、上記の例namespace: '#demo-1'では、次のような CSS クラスが生成されます。

#demo-1 [data-sizex="2"] {width: 210px;}

同様namespace: '#demo-2'に、

#demo-2 [data-sizex="2"] {width: 44px;}

の場合ul#grid2 li、上記の両方の CSS ルールの優先度は同じであるため、適用されるルールの優先度は、ルールが表示される順序に依存します。この例では、 grid2 の前に grid1を初期化しているため、まず grid1 の CSS ルールが生成され、その後に grid2 が生成されます。

そのため、grid2 が初期化coordsされると、最初にオブジェクトが作成され、その時点で grid1 の幅と高さが使用されます。

解決策: grid1 の前に 変更namespace: '#demo-2'して初期化し、オプションも正しく設定します。namespace: '#demo-1 #demo-2'widget_selector

        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');
于 2014-04-08T14:48:45.143 に答える