Gridstack.js: 自定义拖动手柄

创建于 2015-03-24 · 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

最有用的评论

嘿克里希纳，

问题似乎出在您的选项变量中。

如果您查看库代码，您可以看到，从第 379 行开始，默认选项和组织方式。

自定义可拖动容器的句柄需要是可拖动属性的子属性；您的 js 代码需要如下所示：

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

indriemarius 于 2015-03-24

👍11 🚀1 ❤1

所有3条评论

嘿克里希纳，

问题似乎出在您的选项变量中。

如果您查看库代码，您可以看到，从第 379 行开始，默认选项和组织方式。

自定义可拖动容器的句柄需要是可拖动属性的子属性；您的 js 代码需要如下所示：

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

indriemarius 于 2015-03-24

👍11 🚀1 ❤1

酷 - 这就像一个魅力 - 你很棒。一整天都在踢它，这是你的答案，它只是工作:) 太棒了。

KrishnaPG 于 2015-03-25

它真的帮助了伙计们，谢谢。

buffalonan 于 2015-10-12

此页面是否有帮助？

0 / 5 - 0 等级

Gridstack.js: 自定义拖动手柄

最有用的评论

所有3条评论

相关问题