Javascript Gridstack动态创建的小部件未被拖动

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

函数AddWidget（）
{
var grid=$（'.grid stack'）。data（'gridstack'）；
var html=''；
html+=“示例文本框”；
html+=''；
html+=''；
addWidget（$（html），0,0,4,1）
}

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

---

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

在这里查看Gridstack浮动网格演示

添加另一个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)
}

函数AddWidget（）
{
var grid=$（'.grid stack'）。data（'gridstack'）；
var html=''
html+=''；
html+=“示例文本框”；
html+=''；
html+=''；
addWidget（$（html），0,0,4,1）
}

这将修复您的问题，并正确添加一个小部件，您现在可以正常拖动。

---

希望有帮助

对于我来说，jQuery被加载到页面的其他地方，并导致与GridStack中在添加小部件后添加resize元素的部分发生冲突，另外导致任何后续JS失败

我通过删除

标记添加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

当你需要帮助，而别人给了你错误的信息时，情况会变得更糟，如果你不知道去哪里，不要暗示，除了无礼之外，这还会迫使人们寻找不存在的东西

可能您的错误与我的相同，我忽略了一个父div，包括

，而它本不应该忽略，因为它是

的女儿，请参阅正确的格式：

<div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <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-width="2" data-gs-height="2" data-gs-min-width="2" 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>

$grid=$（'.grid stack'）；
const widget=''；
$grid.data（'gridstack'）.addWidget（小部件）；

您的演示不起作用。它与我的代码中的行为相同。小部件已创建但未移动或拖动您是否尝试使用makeWidget功能？