Gridstack.js: poignée de glissement personnalisée

Créé le 24 mars 2015  ·  3Commentaires  ·  Source: gridstack/gridstack.js

Existe-t-il un exemple d'utilisation de la poignée de déplacement personnalisée ?
J'essaie de rendre les éléments déplaçables uniquement en utilisant un en-tête de panneau (et non le corps entier) - j'ai essayé le code ci-dessous avec de nombreuses combinaisons possibles, mais je n'ai pas réussi

    <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

le code js :

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

essayé handle:'.panel' , handle:'panel-heading' et même sans poignée. Et j'ai également essayé de supprimer la classe grid-stack-item-content - mais dans tous les cas, le résultat était either the whole thing moves or nothing moves at all .

Comment rendre l'élément déplaçable uniquement par son en-tête ?

picture KrishnaPG

Commentaire le plus utile

Salut Krishna,

Le problème semble être dans vos options var.

Si vous regardez dans le code de la bibliothèque, vous pouvez voir, à partir de la ligne 379, les options par défaut et la façon dont elles sont organisées.

Le handle d'un conteneur déplaçable personnalisé doit être une sous-propriété de la propriété déplaçable ; votre code js doit ressembler à ceci :

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);
picture indriemarius le 24 mars 2015
👍11 🚀1 ❤1

Tous les 3 commentaires

Salut Krishna,

Le problème semble être dans vos options var.

Si vous regardez dans le code de la bibliothèque, vous pouvez voir, à partir de la ligne 379, les options par défaut et la façon dont elles sont organisées.

Le handle d'un conteneur déplaçable personnalisé doit être une sous-propriété de la propriété déplaçable ; votre code js doit ressembler à ceci :

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);
indriemarius picture indriemarius le 24 mars 2015
👍11 🚀1 ❤1

Cool - ça marche comme un charme - tu es génial. Je l'ai fait toute la journée, et voici votre réponse, et ça marche :) Incroyable.

KrishnaPG picture KrishnaPG le 25 mars 2015

Cela a vraiment aidé les gars, merci.

buffalonan picture buffalonan le 12 oct. 2015
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

athamsnajeeb1 picture athamsnajeeb1  ·  7Commentaires
Metal101 picture Metal101  ·  4Commentaires
kevinlandsberg picture kevinlandsberg  ·  5Commentaires
alissondiel picture alissondiel  ·  6Commentaires
73R3WY picture 73R3WY  ·  4Commentaires