gridstack.js: 添加了不可拖动的小部件

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: 添加了不可拖动的小部件

gridstack.js: Added widgets now dragable

javascript

gridstack