问gridstack.js:添加了现在可拖动的小部件
EN

Stack Overflow用户

提问于 2018-11-13 09:36:12

回答 1查看 689关注 0票数 0

我正在使用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>

javascript

gridstack

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-14 10:33:09

指向addWidget函数的div应该具有此结构才能正确工作：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53277908

复制

相似问题

问gridstack.js:添加了现在可拖动的小部件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问gridstack.js:添加了现在可拖动的小部件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问gridstack.js:添加了现在可拖动的小部件
EN