Gridstack.js: benutzerdefinierter Ziehgriff

Erstellt am 24. März 2015 · 3Kommentare · Quelle: gridstack/gridstack.js

Gibt es ein Beispiel für die Verwendung von benutzerdefinierten Ziehgriffen?
Ich versuche, Elemente nur mithilfe eines Panel-Headers (und nicht des gesamten Körpers) ziehbar zu machen - habe den folgenden Code mit vielen möglichen Kombinationen ausprobiert, konnte aber keinen Erfolg erzielen

    <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

der js-code:

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

versucht handle:'.panel' , handle:'panel-heading' und sogar ohne Griff. Und habe auch versucht, die Klasse grid-stack-item-content entfernen - aber in allen Fällen war das Ergebnis either the whole thing moves or nothing moves at all .

Wie kann man das Element nur durch seine Kopfzeile beweglich machen?

Quelle

KrishnaPG

Hilfreichster Kommentar

Hallo Krishna,

Das Problem scheint in Ihrer Optionsvariable zu liegen.

Wenn Sie einen Blick in den Bibliothekscode werfen, sehen Sie ab Zeile 379 die Standardoptionen und deren Organisation.

Das Handle für einen benutzerdefinierten ziehbaren Container muss eine Untereigenschaft der ziehbaren Eigenschaft sein; Ihr js-Code muss ungefähr so aussehen:

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

indriemarius am 24. März 2015

👍11 🚀1 ❤1

Alle 3 Kommentare

Hallo Krishna,

Das Problem scheint in Ihrer Optionsvariable zu liegen.

Wenn Sie einen Blick in den Bibliothekscode werfen, sehen Sie ab Zeile 379 die Standardoptionen und deren Organisation.

Das Handle für einen benutzerdefinierten ziehbaren Container muss eine Untereigenschaft der ziehbaren Eigenschaft sein; Ihr js-Code muss ungefähr so aussehen:

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

indriemarius am 24. März 2015

👍11 🚀1 ❤1

Cool - das funktioniert wie ein Zauber - du bist großartig. Habe den ganzen Tag drüber getreten und hier ist deine Antwort und es funktioniert einfach :) Erstaunlich.

KrishnaPG am 25. März 2015

Es hat wirklich geholfen, Leute, danke.

buffalonan am 12. Okt. 2015

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Gridstack.js: benutzerdefinierter Ziehgriff

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen