gridstack.js issue base
Use this as a base for examples for gridstack.js issues.
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@4.2.3/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@4.2.3/dist/gridstack-h5.js"></script>
<h1>gridstack.js destory(false) requires staticGrid:false to re-enable drag/resize</h1>
<p>Simply click 'Destroy Grid' then 'Ini Grid' to see the outcome. Clicking 'Set Static Grid False' will restore drag/resize functionality.</p>
<div><a class="btn btn-default" onClick="destroyGrid()" href="#">Destroy Grid</a></div>
<div><a class="btn btn-default" onClick="initGird()" href="#">Init Grid</a></div>
<div><a class="btn btn-default" onClick="setStaticFalse()" href="#">Set Static Grid 'false'</a></div>
<br />
<div class="grid-stack"></div>
CSS
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
JavaScript
var options = { // put in gridstack options here
disableOneColumnMode: true, // for jfiddle small window size
float: false
};
var grid = GridStack.init(options);
var count = 0;
var items = [
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 0, w: 2},
{x: 3, y: 1, h: 2},
{x: 0, y: 2, w: 2},
];
addNewWidget = function () {
var node = items[count] || {
x: Math.round(12 * Math.random()),
y: Math.round(5 * Math.random()),
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random())
};
node.content = String(count++);
grid.addWidget(node);
return false;
};
addNewWidget();
addNewWidget();
destroyGrid = function(){
grid.destroy(false);
};
initGird = function(){
grid = GridStack.init(options);
}
setStaticFalse = function(){
grid.setStatic(false);
}