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@3.1.2/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@3.1.2/dist/gridstack-h5.js"></script>
<div class="grid-stack grid-stack-animate ui-droppable" gs-current-row="10" style="height: 717.5px;"><div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" gs-x="10" gs-y="8" gs-w="2" gs-h="2" draggable="true"><div class="grid-stack-item-content">11</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 100; user-select: none;"></div></div><div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" gs-x="8" gs-y="8" gs-w="2" gs-h="2" draggable="true"><div class="grid-stack-item-content">10</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 100; user-select: none;"></div></div><div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" gs-x="6" gs-y="4" gs-w="4" gs-h="2" draggable="true" style=""><div class="grid-stack-item-content">9</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 100; user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se" style="z-index: 100; user-select: none;"></div><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,document.getElementsByClassName(".grid-stack")[0]);
grid.enableMove(true, true);
//grid.enableMove(false, true);