Gridstack 动态创建的小部件不拖动

Posted 2023-02-19

【中文标题】Gridstack 动态创建的小部件不拖动

【英文标题】：Gridstack dynamically created widgets are not dragging

【发布时间】：2019-03-08 09:59:38

【问题描述】：

我正在使用 GridStack 库为我的小部件创建响应式布局。这是我在单击按钮时创建小部件的函数

function AddWidget()
    
        var grid =  $('.grid-stack').data('gridstack');

        var html = '<div class="grid-stack-item-content">';
        html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
        html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
        html += '</div>';

        grid.addWidget($(html), 0, 0, 4, 1)
    

小部件创建成功。我也可以调整它的大小。 但问题是它们不可拖动。我可以在我的小部件项目 html 上看到 ui-draggable 类，但它们没有拖动。

如果我已经在我的布局中定义了小部件，然后初始化 stackgrid 那些工作正常。

【问题讨论】：

你试过使用makeWidget功能吗？

【参考方案1】：

在此处查看 Gridstack 浮动网格演示 http://gridstackjs.com/demo/float.html

添加另一个 div 可以解决您的问题 - 您需要将 class="grid-stack-item-content" 的 div 嵌套在另一个 div 中。这个顶部 div 将被初始化为小部件。

例如：

function AddWidget()

    var grid =  $('.grid-stack').data('gridstack');
    var html = '<div>'
    html += '<div class="grid-stack-item-content">';
    html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
    html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
    html += '</div></div>';

    grid.addWidget($(html), 0, 0, 4, 1)

这解决了您的问题并正确添加了您现在可以正常拖动的小部件。 希望对您有所帮助！

【讨论】：

您的演示无法正常工作。它的行为与我的代码中的行为相同。小部件已创建，但它没有移动或拖动

@AamirAli：你找到解决方案了吗？因为选择的答案并不能解决我的问题。

【参考方案2】：

对我来说，jQuery 正在页面上的其他位置加载，并导致与添加小部件后添加调整大小元素的 GridStack 部分发生冲突，另外导致任何后续 JS 失败。

我通过删除 <script> 标记来添加 GridStack JS 并改用以下代码解决了这个问题：

    window.addEventListener("load", function()
        jQuery.getScript("https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack.all.js", function();
            // your GridStack code
        )
    )

框架作者计划很快删除 jQuery，幸运的是！

【参考方案3】：

当你需要帮助而人们给你错误的信息时，情况会变得更糟，如果你不知道该去哪里，不要指出，除了不尊重之外，它还会迫使人们寻找不知道的东西'不存在。

可能你的错误和我的一样，我忽略了一个父div，包括<div class="grid-stack-item-content">直接，当它不应该的时候，因为它是<div class="grid-stack-item">的女儿，请看正确的格式：

<div class="grid-stack" data-gs- data-gs-animate="yes">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs- data-gs->
        <div class="grid-stack-item-content"><input type="text"></div>
        </div>
    </div>

把它放在点击功能中，看看它是否适合你：

<script>
$grid = $('.grid-stack'); 
const widget = '<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs- data-gs- data-gs-min- data-gs-no-resize="yes"><div class="grid-stack-item-content"><input type="text" class="form-control"></div></div>';
$grid.data('gridstack').addWidget(widget);
</script>