gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-jq.js"></script>

    <div class="sidebar">
         <div class="grid-stack-item">
            <div class="grid-stack-item-content">Item</div>
          </div>
    </div>
    <div class="grid-stack"></div>

CSS

.grid-stack {
  background: #FAFAD2;
  margin-top: 20px;
  border: 1px solid red;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}


.sidebar .grid-stack-item {
  border: 2px dashed green;
  z-index: 10;
  background: rgba(0, 255, 0, 0.1);
  cursor: default;
}
.sidebar .grid-stack-item .grid-stack-item-content {
  background: none;
}

JavaScript

let grid = GridStack.init({
			column: 1,
			row: 3,
			float: true,
      cellHeight: 50,
      acceptWidgets: true,
	});
  
	grid.load([{x:0, y:0, content: '1'}]);

	GridStack.setupDragIn('.sidebar .grid-stack-item', { 
		revert: 'invalid', 
		scroll: false, 
		appendTo: 'body', 
		helper: 'clone' 
	});