Question

我正在使用gridstack.js创建一个空网格，并且他们通过其API添加了新元素。新项目正确显示。它们和可以重新调整大小，但是我不能将它们拖到网格周围。我尝试使用enable()和enableMove(true, true)，但似乎没有效果。

此示例仅包含一个元素，但是我假装在工作时添加更多元素。

这是页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <link href="/static/css/jquery-ui.min.css" rel="stylesheet">
    <link href="/static/fonts/css/fontawesome-all.css" rel="stylesheet">
    <link href="/static/css/energy.css" rel="stylesheet">
    <link href="/static/css/icons.css" rel="stylesheet">    
    <link rel="stylesheet" href="/static/css/gridstack.min.css" />

</head>
<body>
    <header>
    </header>
    <main>
        <article class="container-fluid">
            <div class="slot big text-center">
                <div class="grid-stack"></div>
            </div>
        </article>
    </main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js" integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps=" crossorigin="anonymous"></script>
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/js/jquery-ui.js"></script>
    <script src="/static/js/materialize.min.js"></script>
    <script src="/static/js/clipboard.min.js"></script>

    <script type="text/javascript" src='/static/js/gridstack.min.js'></script>
    <script type="text/javascript" src='/static/js/gridstack.jQueryUI.min.js'></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $Grid = $('.grid-stack');
        $Grid.enableMove(true, true);
        $Grid.gridstack(
            {
            }
        );

        const widget = '<div data-widget-source="/widgets/1/" class="widget" style="background-color: red;"></div>';
            $Grid.data('gridstack').addWidget(
                widget,
                1, 1, 1, 1,false,
                1,12,1,12, id ="slot_1"
            );
    });
</script>
</body>
</html>

Answer 1

粘贴到addWidget函数的div应该具有以下结构才能正常工作：

<div >
    <div class="grid-stack-item-content" >
       ... your stuff here..
    </div> 
</div>

gridstack.js：现在添加了可拖动的小部件

1 个答案: