gridstack.js/demo/nested.html at develop · liquidlabsio/gridstack.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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>Nested grids demo (ES6)</title>
  <link rel="stylesheet" href="demo.css"/>
  <script src="../dist/gridstack-jq.js"></script>
  <style type="text/css">
    .grid-stack .grid-stack {
      background: rgba(255, 255, 255, 0.3);
    }
    .grid-stack .grid-stack .grid-stack-item-content {
      background: lightpink;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <h1>Nested grids demo</h1>
    <p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
    <p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now. If you don't need the nested2 behavior I suggest you use h5 version.</p>
    <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
    <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
    <br><br>
    <!-- grid will be added here -->
  </div>

  <script type="text/javascript">
    let sub1 = [ {w:3}, {w:3}, {w:3}, {w:3}, {w:3}, {w:3}];
    let sub2 = [ {w:3}, {x:0, y:1, w:3}];
    let count = 0;
    [...sub1, ...sub2].forEach(d => d.content = String(count++));
    let subOptions = {
      itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
      acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted, otherwise grid-items causes all sort of issues
      disableOneColumnMode: true, // nested are small, but still want N columns
      margin: 1
    };
    let layout = {cellHeight: 70, children: [
      {w:1, content: 'regular item'},
      {x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},
      {x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},
    ]};

    // create and load it all from JSON above
    GridStack.addGrid(document.querySelector('.container-fluid'), layout);

    addNewWidget = function(selector) {
      grid = document.querySelector(selector).gridstack;
      let node = {
        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()),
        content: count++
      };
      grid.addWidget(node);
      return false;
    };
  </script>
</body>
</html>