demo/column.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Column grid demo</title>

  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
  <script src="../dist/gridstack-h5.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>column() grid demo (fix cellHeight)</h1>
    <div><span>Number of Columns:</span> <span id="column-text">12</span></div>
    <div>
      <label>Choose re-layout:</label>
      <select onchange="setLayout(this.value)">
        <option value="moveScale">move + scale</option>
        <option value="move">move</option>
        <option value="scale">scale</option>
        <option value="none">none</option>
        <option value="custom">custom</option>
      </select>
    </div>
    <div>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
      <a onClick="setOneColumn(false)" class="btn btn-primary" href="#">1 Column</a>
      <a onClick="setOneColumn(true)" class="btn btn-primary" href="#">1 Column DOM</a>
      <a onClick="column(2)" class="btn btn-primary" href="#">2 Column</a>
      <a onClick="column(3)" class="btn btn-primary" href="#">3 Column</a>
      <a onClick="column(4)" class="btn btn-primary" href="#">4 Column</a>
      <a onClick="column(6)" class="btn btn-primary" href="#">6 Column</a>
      <a onClick="column(8)" class="btn btn-primary" href="#">8 Column</a>
      <a onClick="column(10)" class="btn btn-primary" href="#">10 Column</a>
      <a onClick="column(12)" class="btn btn-primary" href="#">12 Column</a>
    </div>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    let grid = GridStack.init({
      float: true,
      disableOneColumnMode: true, // prevent auto column for this manual demo
      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
    });
    let text = document.querySelector('#column-text');
    let layout = 'moveScale';

    grid.on('added removed change', function(e, items) {
      let str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    let items = [
      /* match karma testing
      {x: 0, y: 0, w: 4, h: 2},
      {x: 4, y: 0, w: 4, h: 4},
      {text: ' auto'},
      */
      {x: 0, y: 0, w: 2, h: 2},
      {x: 2, y: 0, w: 2},
      {x: 5, y: 1},
      {x: 5, y: 0, w: 2},
      // {x: 0, y: 0}, // conflict
      {text: ' auto'}, // autoPosition testing
      // {x: 4, y: 0}, // same auto-pos
      {x: 5, y: 3, w: 2},
      {x: 0, y: 4, w: 12}
    ];
    let count = 0;
    items.forEach(n => n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : ''));
    grid.load(items);

    function addWidget() {
      let n = items[count] || {
        x: Math.round(12 * Math.random()),
        y: Math.round(5 * Math.random()),
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random())
      };
      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
      grid.addWidget(n);
    };

    function column(n) {
      grid.column(n, layout);
      text.innerHTML = n;
    }
    function setOneColumn(dom) {
      grid.opts.oneColumnModeDomSort = dom;
      grid.column(1, layout);
      text.innerHTML = dom ? '1 DOM' : '1';
    }
    // dummy test method that moves items to the right each new layout... grid engine will validate those values (can't be neg or out of bounds) anyway...
    function columnLayout(column, oldColumn, nodes, oldNodes) {
      oldNodes.forEach(n => {
        n.x = n.x + 1;
        nodes.push(n);
      });
      oldNodes.length = 0;
    }
    function setLayout(name) {
      layout = name === 'custom' ? this.columnLayout : name;
    }

  </script>
</body>
</html>