Gridstack.js: custom drag handle

Created on 24 Mar 2015 · 3Comments · Source: gridstack/gridstack.js

Is there any example for custom drag handle usage?
I am trying to make items draggable only by using a panel header (and not the whole body) - tried below code with many possible combinations, but couldn't get success

    <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

the js code:

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

tried handle:'.panel', handle:'panel-heading' and even without handle. And tried removing the grid-stack-item-content class also - but in all cases the result was either the whole thing moves or nothing moves at all.

How to make the item movable only by its header?

Source

KrishnaPG

Most helpful comment

Hey Krishna,

The issue seems to be in your options var.

If you take a look in the library code you can see, starting with line 379, the default options and the way the are organized.

The handle for a custom draggable container needs to be a sub property of the draggable property; your js code needs to look something like this:

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

indriemarius on 24 Mar 2015

👍11 🚀1 ❤1

All 3 comments

Hey Krishna,

The issue seems to be in your options var.

If you take a look in the library code you can see, starting with line 379, the default options and the way the are organized.

The handle for a custom draggable container needs to be a sub property of the draggable property; your js code needs to look something like this:

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

indriemarius on 24 Mar 2015

👍11 🚀1 ❤1

Cool - that's working like a charm - you are great. Been kicking over it for the whole day, and here is your answer, and its just working :) Amazing.

KrishnaPG on 25 Mar 2015

It really helped guys, thanks.