gridstack.js issue base

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

by csokisskeksz

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@7.2.2/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@7.2.2/dist/gridstack.min.css">
<h1>Nested grid drag issue</h1>
<br />

<div class="grid-stack"></div>

CSS

.grid-stack-instance-1 {
  background: lightgoldenrodyellow;
}

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

.grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
  background: rgb(0 0 0 / 10%);
  inset: 2px 4px;
}

JavaScript

const gridOptionsBase = {
  float: true,
  draggable: { scroll: false },
  disableOneColumnMode: true,
  cellHeight: 10,
  margin: 5,
  acceptWidgets: true
};

var subGridOptions = {
  ...gridOptionsBase,
  column: 'auto'
};

var options = {
  ...gridOptionsBase,
  column: 12,
  children: [
  	{ id: 0, x: 0, y: 0, w: 4, h: 5 },
  	{
    	id: 1,
      x: 0,
      y: 1,
      w: 10,
      h: 50,
      subGrid: {
      	...subGridOptions,
        children: [
        	{ id: 2, x: 0, y: 0, w: 4, h: 5 },
          {
            id: 3,
            x: 0,
            y: 10,
            w: 10,
            h: 25,
            subGrid: {
              ...subGridOptions,
              children: [
                { id: 4, x: 0, y: 0, w: 4, h: 5 }
              ]
            }
    			},
          {
            id: 5,
            x: 0,
            y: 35,
            w: 1,
            h: 5,
            subGrid: {
              ...subGridOptions
            }
    			}
        ]
      }
    }
  ]
};

var grid = GridStack.init(options);