jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive grid demo</title>

  <link rel="stylesheet" href="https://gridstackjs.com/demo/demo.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack-extra.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/gridstack@1.1.2/dist/gridstack.all.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-3"></div>
      <div class="col-9">
        <div class="grid-stack">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript

var grid = GridStack.init({
      float: true,
      resizable: {
					handles: 'sw'
				}
      });
    
    var items = [ // Added maxWidth vars!
      {x: 0, y: 0, width: 2, height: 2, maxWidth: 2},
      {x: 2, y: 1, width: 2, height: 1, maxWidth: 2},
      {x: 5, y: 1, width: 1, height: 1},
      {x: 1, y: 3, width: 4, height: 1, maxWidth: 2},
      {x: 5, y: 2, width: 2, height: 1, maxWidth: 2},
      {x: 0, y: 4, width: 12, height: 1, maxWidth: 2}
    ];
    grid.batchUpdate();
    items.forEach(function(node, index) {
      grid.addWidget('<div><div class="grid-stack-item-content">' + index + '</div></div>', node);
    });
    grid.commit();