1

我在下面的代码中使用了 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. 我无法拖动网格堆栈项。有人能帮我吗？2. 其次，我无法缩放 grid-stack-item 容器以增加其高度以匹配内容

任何帮助将不胜感激，如果需要任何事情，我也可以提供更清晰的信息

谢谢

4

1 回答 1

2

1）您正在指定一个.-content标记中不存在的拖动句柄！

2) Gridstack 项目显然具有固定的宽度和高度，因为它们是一个矩阵，如果您希望项目具有更高的高度，则必须通过显式指定它data-gs-height="x"

于 2017-04-05T12:29:30.090 回答