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-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css">
<h2>
  Can I drag a new sub grid into parent grid? 
</h2>
<h4>
  example
</h4>
<div class="sidebar">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Drag me</div>
  </div>
  <div class="grid-stack-item grid-stack-sub-grid">
    <div class="grid-stack-item-content">Drag sub gird</div>
  </div>
</div>

<button onClick="addSubGrid()">Add sub grid</button>
<div class="grid-stack"></div>

CSS

.grid-stack {
  background: #FAFAD2;
}

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

.grid-stack-item-removing {
  opacity: 0.5;
}

.sidebar {
  background: rgba(0, 255, 0, 0.1);
  padding: 25px 0;
  height: 100px;
  text-align: center;
}
.sidebar .grid-stack-item {
  width: 120px;
  height: 50px;
  border: 2px dashed green;
  text-align: center;
  line-height: 35px;
  background: rgba(0, 255, 0, 0.1);
  cursor: default;
  display: inline-block;
}
.sidebar .grid-stack-item .grid-stack-item-content {
  background: none;
}

/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
  background: rgba(0,0,0,0.1);
  inset: 0 2px;
}
.grid-stack.grid-stack-nested {
  background: none;
  /* background-color: red; */
  /* take entire space */
  position: absolute;
  inset: 0; /* TODO change top: if you have content in nested grid */
}

JavaScript

let main = [{x:0, y:0}]
let sub0 = [{x:0, y:0}, {x:1, y:0}];
let subOptions = {
  cellHeight: 50,
  margin: 5,
  column: 'auto',
  acceptWidgets: true
};
let options = {
  cellHeight: 50,
  margin: 5,
  minRow: 2,
  acceptWidgets: true,
  subGridOpts: subOptions,
  disableOneColumnMode: true,
  children: [
    ...main,
    {x:2, y:0, w:2, h:3, id: 'sub0', subGridOpts: {children: sub0, ...subOptions}},
  ]
};
let grid = GridStack.init(options);
GridStack.setupDragIn(
  '.sidebar .grid-stack-item',
  { appendTo: 'body', helper: 'clone' }
);

function addSubGrid() {
  const sub = grid.addWidget({x:0, y:10, w:2, subGridOpts: {...subOptions} });
  const gsEl = sub.querySelector('.grid-stack');
  gsEl.gridstack.on('added', async (event, items) => {
    console.log('sub added triggered')
  })
}