在gridstack.js中，拖動功能不起作用

Question

我在下面的代碼（基本結構）中使用了GridStack.JS。

<div class="grid grid-stack">
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs-width="4" data-gs-height="2">
    <div class="inner-grid">
    </div>
</div>

腳本如下

<script type="text/javascript">
    $(function () {
        var options = {
            cellHeight: 80,
            verticalMargin: 10,
            columns: 14,
            acceptWidgets: '.',    
            animate: true,
            handle: '.draghandle',
            float: true,
            draggable: {handle: '.-content', scroll: true, appendTo:    'body'},

        };
        $('.grid-stack').gridstack(options);
    });

我在這里有2個問題。1.我無法將grid-stack-items拖動。 有人能幫我嗎？ 2.其次，我無法縮放網格堆棧項目容器以增加其高度以匹配內容

如有任何幫助，我們將不勝感激。

謝謝

Answer 1

1）您指定的拖動句柄.-content在您的標記中不存在！

2）Gridstack項目顯然具有固定的寬度和高度，因為它們是矩陣，如果要使項目具有更高的高度，則必須通過data-gs-height="x"顯式指定它