Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

custom drag handle #100

Closed
KrishnaPG opened this issue Mar 24, 2015 · 3 comments
Closed

custom drag handle #100

KrishnaPG opened this issue Mar 24, 2015 · 3 comments

Comments

@KrishnaPG
Copy link

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?

@indriemarius
Copy link

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);

@KrishnaPG
Copy link
Author

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.

@buffalonan
Copy link

It really helped guys, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants