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行目から始まるライブラリコードを見ると、デフォルトのオプションとその編成方法がわかります。

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件

関連する問題