Gridstack.js: asa de arrastre personalizada

Creado en 24 mar. 2015 · 3Comentarios · Fuente: gridstack/gridstack.js

¿Hay algún ejemplo de uso de la manija de arrastre personalizada?
Estoy tratando de hacer que los elementos se puedan arrastrar solo mediante el uso de un encabezado de panel (y no todo el cuerpo); probé el código siguiente con muchas combinaciones posibles, pero no pude tener éxito

    <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

el código js:

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

intentado handle:'.panel' , handle:'panel-heading' e incluso sin mango. E intenté eliminar la clase grid-stack-item-content también, pero en todos los casos el resultado fue either the whole thing moves or nothing moves at all .

¿Cómo hacer que el artículo sea movible solo por su encabezado?

Fuente

KrishnaPG

Comentario más útil

Oye Krishna,

El problema parece estar en sus opciones var.

Si echa un vistazo al código de la biblioteca, puede ver, comenzando con la línea 379, las opciones predeterminadas y la forma en que están organizadas.

El identificador de un contenedor personalizado que se puede arrastrar debe ser una propiedad secundaria de la propiedad que se puede arrastrar; su código js debe verse así:

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

indriemarius en 24 mar. 2015

👍11 🚀1 ❤1

Todos 3 comentarios

Oye Krishna,

El problema parece estar en sus opciones var.

Si echa un vistazo al código de la biblioteca, puede ver, comenzando con la línea 379, las opciones predeterminadas y la forma en que están organizadas.

El identificador de un contenedor personalizado que se puede arrastrar debe ser una propiedad secundaria de la propiedad que se puede arrastrar; su código js debe verse así:

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

indriemarius en 24 mar. 2015

👍11 🚀1 ❤1

Genial, eso está funcionando a las mil maravillas, eres genial. Lo he estado pateando durante todo el día, y aquí está tu respuesta, y está funcionando :) Increíble.

KrishnaPG en 25 mar. 2015

Realmente ayudó a los chicos, gracias.