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：現在添加了可拖動的小部件

問題描述

1 個解決方案

解決方案1
0 已采納 2018-11-14 10:33:09

gridstack.js：現在添加了可拖動的小部件

問題描述

1 個解決方案

解決方案1 0 已采納 2018-11-14 10:33:09

解決方案1
0 已采納 2018-11-14 10:33:09