在这里查看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)
}

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

当你需要帮助而人们给予你错误的信息时，情况就更糟了，如果你不知道该去哪里，不表明，除了不尊重之外，它还迫使人们寻找不存在的东西。
可能你的错误和我的一样，我忽略了一个父div，直接包括<div class="grid-stack-item-content">，当它不应该的时候，因为它是<div class="grid-stack-item">的女儿，请参阅正确的格式：

<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>

把它放在click函数中，看看它是否适合你：

<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>

对我来说，jQuery被加载到页面的其他地方，并导致与GridStack的一部分冲突，该部分在添加小部件后添加了resize元素，另外还导致任何后续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！

你可以试试

let grid = GridStack.init();
let customContent = '<span>My custom content</span>';

const DEFAULT_HEIGHT = 2;
const DEFAULT_WIDTH = 2;

grid.addWidget({w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT, content: customContent});