gridstack.js issue base

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

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.6.3/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.3/dist/gridstack.all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://gridstackjs.com/demo/demo.css">
<div class="row">
    <div class="col-md-2 d-none d-md-block">
      <div class="newWidget grid-stack-item">
        <div class="card-body grid-stack-item-content">
          <div>
            <ion-icon name="add-circle" style="font-size: 400%"></ion-icon>
          </div>
          <div>
            <span>Drag me in into the dashboard!</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-10">
      <div class="grid-stack" id="advanced-grid" data-gs-animate="yes">
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="3">
          <div class="grid-stack-item-content">
            This nested grid accepts new widget with class "newWidget"<br/>
            The parent grid also accepts new widget but with a differenent class 'otherWidgetType'<br/>&nbsp;
          <div class="grid-stack nested1">
            <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
            <div class="grid-stack-item sub" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
            <div class="grid-stack-item sub" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
            <div class="grid-stack-item sub" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
           ...

CSS

.grid-stack-item-removing {
      opacity: 0.8;
      filter: blur(5px);
    }

    #advanced-grid .grid-stack-item-content {
      background-color: transparent;
    }
    #advanced-grid .nested1 .grid-stack-item-content {
      background-color: #18bc9c;
    }

JavaScript

$(function () {
      var $grid = $('#advanced-grid');
     
      $grid.on('added', function(e, items) { log(' added ', items) });
      $grid.on('removed', function(e, items) { log(' removed ', items) });
      $grid.on('change', function(e, items) { log(' change ', items) });
      function log(type, items) {
        if (!items) { return; }
        var str = '';
        for (let i=0; i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
        console.log(type + items.length + ' items.' + str );
      }

      $grid.gridstack({
        acceptWidgets: '.otherWidgetType'
      });
		  $('.grid-stack.nested1').gridstack({
        acceptWidgets: '.newWidget'
      });

      $('.newWidget').draggable({
        revert: 'invalid',
        scroll: false,
        appendTo: 'body',
        helper: 'clone'
      });
    });