Gridstack.js: настраиваемая ручка перетаскивания

Созданный на 24 мар. 2015 · 3Комментарии · Источник: gridstack/gridstack.js

Есть ли какой-нибудь пример использования пользовательской ручки перетаскивания?
Я пытаюсь сделать элементы перетаскиваемыми только с помощью заголовка панели (а не всего тела) - пробовал код ниже со многими возможными комбинациями, но не смог добиться успеха

    <div class="grid-stack">
        <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 panel panel-default">
                <div class="panel-heading clearfix">
                    <span class="panel-title pull-left"><span class="glyphicon glyphicon-asterisk"></span> <span class="panel-title-text">Featuring</span></span>
                </div>
                <div class="panel-body ">
                    <ul class="list-group">
                        <li class="list-group-item">a</li>
                        <li class="list-group-item">v</li>
                    </ul>
                </div>
            </div>
        </div>
    </div

код js:

    var options = {
        cell_height: 80,
        vertical_margin: 10,
        animate: true,
        handle:  ??? 
    };
    this.$('.grid-stack').gridstack(options);

пробовал handle:'.panel' , handle:'panel-heading' и даже без ручки. И попытался удалить также класс grid-stack-item-content - но во всех случаях результат был either the whole thing moves or nothing moves at all .

Как сделать так, чтобы элемент перемещался только по заголовку?

Источник

KrishnaPG

Самый полезный комментарий

Привет, Кришна,

Кажется, проблема в ваших опциях var.

Если вы посмотрите в код библиотеки, вы увидите, начиная со строки 379, параметры по умолчанию и то, как они организованы.

Дескриптор настраиваемого перетаскиваемого контейнера должен быть вложенным свойством свойства draggable; ваш код js должен выглядеть примерно так:

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);

indriemarius 24 мар. 2015

👍11 🚀1 ❤1

Все 3 Комментарий

Привет, Кришна,

Кажется, проблема в ваших опциях var.

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);

indriemarius 24 мар. 2015

👍11 🚀1 ❤1

Круто - это работает как шарм - вы молодцы. Целый день ломал над ним, и вот ваш ответ, и он просто работает :) Замечательно.

KrishnaPG 25 мар. 2015

Ребята, это действительно помогло, спасибо.