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

Posted 2023-02-19

【中文标题】在 gridstack.js 中，拖动功能不起作用

【英文标题】：In gridstack.js, dragging feature isnt working

【发布时间】：2017-06-10 07:17:13

【问题描述】：

我在下面的代码（基本结构）中使用了 GridStack.JS

<div class="grid grid-stack">
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <div class="inner-grid">
    </div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
    <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. 其次，我无法缩放 grid-stack-item 容器以增加其高度以匹配内容

任何帮助将不胜感激 如果需要，我还可以提供更清晰的说明

谢谢

【参考方案1】：

1) 您指定的拖动句柄 .-content 在您的标记中不存在！

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