В 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. Я не могу получить элементы стека сетки, чтобы их можно было перетаскивать. Кто-нибудь может мне помочь? 2. Во-вторых, я не могу масштабировать контейнер grid-stack-item, чтобы увеличить его высоту, чтобы соответствовать содержимому

Любая помощь будет принята с благодарностью. Я также могу предоставить больше ясности в случае необходимости

Спасибо

Answer 1

1) Вы указываете ручку перетаскивания .-content который не существует в вашей разметке!

2) Элементы Gridstack, очевидно, имеют фиксированную ширину и высоту, потому что они представляют собой матрицу. Если вы хотите, чтобы элемент имел большую высоту, вам придется явно указать его через data-gs-height="x"