Gridstack.js: pegangan tarik khusus

Dibuat pada 24 Mar 2015 · 3Komentar · Sumber: gridstack/gridstack.js

Apakah ada contoh untuk penggunaan pegangan seret khusus?
Saya mencoba membuat item hanya dapat diseret dengan menggunakan header panel (dan bukan seluruh badan) - mencoba kode di bawah ini dengan banyak kemungkinan kombinasi, tetapi tidak berhasil

    <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

kode jsnya:

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

mencoba handle:'.panel' , handle:'panel-heading' dan bahkan tanpa pegangan. Dan mencoba menghapus kelas grid-stack-item-content juga - tetapi dalam semua kasus hasilnya adalah either the whole thing moves or nothing moves at all .

Bagaimana cara membuat item hanya dapat dipindahkan dengan header-nya?

Sumber

KrishnaPG

Komentar yang paling membantu

Hai Krisna,

Masalahnya tampaknya ada di opsi Anda var.

Jika Anda melihat kode pustaka yang Anda lihat, dimulai dengan baris 379, opsi default dan cara pengaturannya.

Pegangan untuk wadah yang dapat diseret khusus harus menjadi sub properti dari properti yang dapat diseret; kode js Anda harus terlihat seperti ini:

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

indriemarius pada 24 Mar 2015

👍11 🚀1 ❤1

Semua 3 komentar

Hai Krisna,

Masalahnya tampaknya ada di opsi Anda var.

Jika Anda melihat kode pustaka yang Anda lihat, dimulai dengan baris 379, opsi default dan cara pengaturannya.

Pegangan untuk wadah yang dapat diseret khusus harus menjadi sub properti dari properti yang dapat diseret; kode js Anda harus terlihat seperti ini:

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

indriemarius pada 24 Mar 2015

👍11 🚀1 ❤1

Keren - itu bekerja seperti pesona - Anda hebat. Telah menendangnya sepanjang hari, dan inilah jawaban Anda, dan ini hanya berfungsi :) Luar biasa.

KrishnaPG pada 25 Mar 2015

Itu sangat membantu teman-teman, terima kasih.