gridstack.js issue base

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

by Alain Dumesny

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.all.js"></script>
<link rel="stylesheet" href="https://gridstackjs.com/demo/demo.css">
<div class="grid-stack">
  <div class="grid-stack-item" 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" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
</div>

JavaScript

$(function() {
  var $grid = $('.grid-stack').gridstack({disableOneColumnMode: true});

  $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) {
    var str = '';
    for (let i = 0; items && i < items.length && items[i]; i++) {
      str += ' (x,y)=' + items[i].x + ',' + items[i].y;
    }
    console.log(type + items.length + ' items.' + str);
  }

  $('.grid-stack .grid-stack-item').click(function(e) {
    var item = $(e.currentTarget).closest('.grid-stack-item');
    var g = item.closest('.grid-stack').data('gridstack');
    g.removeWidget(item);
  });
});