Gridstack.js: alça de arrastar personalizada
Existe algum exemplo de uso de alça de arrasto personalizada?
Estou tentando tornar os itens arrastáveis apenas usando um cabeçalho do painel (e não o corpo inteiro) - tentei o código abaixo com muitas combinações possíveis, mas não consegui obter sucesso
<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
o código js:
var options = {
cell_height: 80,
vertical_margin: 10,
animate: true,
handle: ???
};
this.$('.grid-stack').gridstack(options);
tentei handle:'.panel' , handle:'panel-heading' e mesmo sem alça. E tentei remover a classe grid-stack-item-content também - mas em todos os casos o resultado foi either the whole thing moves or nothing moves at all .
Como fazer o item móvel apenas pelo cabeçalho?
KrishnaPG
Todos 3 comentários
Ei Krishna,
O problema parece estar em suas opções var.
Se você der uma olhada no código da biblioteca, poderá ver, começando com a linha 379, as opções padrão e a maneira como estão organizadas.
A alça para um contêiner arrastável personalizado precisa ser uma subpropriedade da propriedade arrastável; seu código js precisa ser parecido com isto:
var options = {
cell_height: 80,
vertical_margin: 10,
animate: true,
draggable: {
handle: '.panel-heading',
}
};
this.$('.grid-stack').gridstack(options);
indriemarius
em 24 mar. 2015
Legal - está funcionando como um encanto - você é ótimo. Fiquei remoendo isso o dia todo, e aqui está sua resposta, e está apenas funcionando :) Incrível.
KrishnaPG
em 25 mar. 2015
Isso realmente ajudou caras, obrigado.
buffalonan
em 12 out. 2015
Questões relacionadas
ascendantofrain
·
6Comentários
PrincessOfSecret
·
6Comentários
saroque
·
4Comentários
alissondiel
·
6Comentários
starplanet
·
4Comentários
Comentários muito úteis
Ei Krishna,
O problema parece estar em suas opções var.
Se você der uma olhada no código da biblioteca, poderá ver, começando com a linha 379, as opções padrão e a maneira como estão organizadas.
A alça para um contêiner arrastável personalizado precisa ser uma subpropriedade da propriedade arrastável; seu código js precisa ser parecido com isto: