Question

我正在使用Gridster.js创建一个类似于环境的仪表板，因此编写了以下代码。问题是所有元素都是垂直堆叠的，实际上我希望它们根据它们的html标记属性中指定的行和列号进行初始化＆＃39; data-row＆＃39;和＆＃39; data-col＆＃39;。

我检查了控制台没有Js错误。加载页面并垂直堆叠元素后，我仍然可以拖动它们，然后通过一个接一个地拖动它们就可以形成网格。

任何人都可以告诉我，当页面加载时，没有正确地将这些元素以网格状格式堆叠，我做错了什么。

以下是输出的图像： As you can see the Elements are vertically stacked on top of one another

以下是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gridster Test page</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="../Third Party Libraries/Gridster/Gridster.min.css"></link>
    <script src="../Third Party Libraries/Gridster/Gridster.min.js"></script>
    <script>
            var gridster;
            $(function () {
                gridster = $(".gridster > ul").gridster({

                    widget_margins: [10, 10],
                    widget_base_dimensions: [140, 140],
                    min_cols: 6,
                    min_rows: 5,
                    resize: {
                        enabled: true
                    }
                }).data('gridster');
            })
</script>
<style>
    ul, ol {
        list-style: none;
    }

    h1 {
        margin-bottom: 12px;
        text-align: center;
        font-size: 30px;
        font-weight: 400;
    }

    h3 {
        font-size: 25px;
        font-weight: 600;
        color: white;
    }

    /* Gridster styles */
    .demo {
        margin: 3em 0;
        padding: 7.5em 0 5.5em;
        background: #004756;
    }

        .demo:hover .gridster {
            opacity: 1;
        }

    .gridster {
        width: 940px;
        margin: 0 auto;
        opacity: .8;
        -webkit-transition: opacity .6s;
        -moz-transition: opacity .6s;
        -o-transition: opacity .6s;
        -ms-transition: opacity .6s;
        transition: opacity .6s;
    }

        .gridster .gs_b {
            background: blue;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_y {
            background: yellow;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_g {
            background: green;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_o {
            background: orange;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
</style>
<div class="gridster ready">
    <ul style="height: 640px; width: 960px; position: relative;">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">a</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">b</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">b</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="gs_g">c</li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2" class="gs_g">d</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_y">e</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1" class="gs_y">f</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_y">g</li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_o">h</li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_o">i</li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_g">k</li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_b">j</li>
    </ul>
</div>

Answer 1

尝试从类

中删除“ready”部分

<div class="gridster">

我很确定插件已经完成了这项工作。

网格元素垂直初始化Gridster.js

1 个答案: