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.