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.0.1/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@4.0.1/dist/gridstack-jq.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@4.0.1/dist/gridstack-extra.css">
<div class="grid-stack" id="grid1"></div>
<div class="grid-stack" id="grid2"></div>
CSS
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack {
border: 3px black solid;
}
JavaScript
let grid1 = GridStack.init({
float: true,
row: 2,
column: 3,
disableOneColumnMode: true,
dragOut: true,
acceptWidgets: true,
disableResize: true
}, document.getElementById('grid1'))
grid1.load([
{x: 0, y: 0, w: 1},
{x: 1, y: 0, h: 1},
]);
let grid2 = GridStack.init({
float: true,
row: 2,
column: 3,
disableOneColumnMode: true,
dragOut: true,
acceptWidgets: true,
disableResize: true
}, document.getElementById('grid2'))
grid2.load([
{x: 0, y: 0, w: 1},
{x: 1, y: 0, h: 1},
]);