javascript - gridstack - gridster example

Gridster no se mueve dinámicamente widgets

Question

Estoy tratando de usar Gridster.js para hacer algunas funciones de arrastrar y soltar en mi proyecto.

Estoy usando un montón de divs para mis widgets, con formularios y botones dentro de estos, en lugar de usar una lista desordenada.

Mi problema es que mi primera columna no puede arrastrar, y no puedo soltar mis widgets en ningún lado. Simplemente vuelven a su lugar original

Aquí está mi diseño:

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

y aquí está mi js, que está en doc listo

var gridster = $(''.gridster'').gridster({
            widget_margins: [5,5],
            widget_selector: ''.dragMe'',
            widget_base_dimensions: [264, 103],
            max_cols: 5,
            max_rows: 5,
            resize: {
                enable: true
            },
            draggable: {
                start: function(event, ui) {
                    dragged = 1;
                },
                stop: function(event, ui){
                    var id = this.$helper[0].attributes[0].value;
                    var row = this.$helper[0].attributes[1].value;
                    var col = this.$helper[0].attributes[2].value;
                    console.log(id, row, col);
                }, 
                items: ''.dragMe'',
                limit: true
            }
        }).data(''gridster'');

Tengo tanto grister.js como el archivo css. ¿Alguna sugerencia para mejorar?

Answer 1

Creo que hay algo más en tu código que lo estropea; revisa este jsfiddle , copié y pegué tu código y solo agregué:

.dragMe {
    background-color:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

Solo colorearlos para que pueda ver los widgets. Aparte de eso, lo único que cambié fue el texto de los botones y su "... ETC". No se arrastra si intenta arrastrarlo por el botón, pero puede arrastrar desde cualquier otro lugar en el widget.

Si por alguna razón necesita arrastrar el botón, le recomendaría cambiarlo a un elemento que no sea de entrada / botón y simular cualquier funcionalidad que necesite con JavaScript.

Cuando mi grilla me da problemas, esto es lo que reviso:

• Todas las etiquetas de apertura / cierre coinciden
• los atributos de datos tienen sentido (Gridster se vuelve loco si los widgets se superponen)

• Los estilos se están aplicando de forma adecuada: asegúrese de que se parezca a lo que piensa.

  Tuve un par de veces en que esperaba ver una cosa, y porque no asumí que el javascript era el culpable, pero faltaban los estilos CSS.

Answer 2

Creo que Gridster requiere un elemento (como div o ul ) debajo del elemento <div class="gridster"> :

<div class="gridster">
     <div class="gridster-container">
         <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>

    ... ETC
     </div>
</div>

Y el JavaScript:

var gridster = $(".gridster div.gridster-container").gridster({...

También puede usar ul y li como si estuvieran usando en su sitio web.