Gridstack 動態創建的小部件不拖動

Question

我正在使用 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 那些工作正常。

Answer 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)
}

這解決了您的問題並正確添加了一個小部件，您現在可以正常拖動。 希望有幫助！

Answer 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，幸運的是！

Answer 3

當你需要幫助而人們給你錯誤的信息時，情況會更糟，如果你不知道去哪里，不要表明，除了不尊重之外，它還會迫使人們尋找不存在的東西。

可能你的錯誤和我的一樣，我直接忽略了一個父 div，包括<div class="grid-stack-item-content"> ，當它不應該時，因為它是<div class="grid-stack-item">的女兒<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>

把它放在點擊功能中，看看它是否適合你：

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