forked from gridstack/gridstack.js
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
using drag and drop to create nested Grids - part1
* partial fix for gridstack#1009 * Create sub-grids on the fly, by dragging items completely over others (nest) vs partially (push) using new flag `GridStackOptions.subGrid.createDynamic=true`. * ability to pause drag&drop collision until the user stops moving - see `DDDragOpt.pause` TODO: need to make it work on already nested grids, remove nested on drag out, more testing...
- Loading branch information
Showing
14 changed files
with
421 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <!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>Constraint nested grids demo</title> | ||
| <link rel="stylesheet" href="demo.css"/> | ||
| <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/> | ||
| <script src="../dist/gridstack-all.js"></script> | ||
| <style type="text/css"> | ||
| .grid-stack-item.sub .grid-stack-item-content { | ||
| background: lightpink; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container-fluid"> | ||
| <h1>Constraint Nested grids demo</h1> | ||
| <p>This example shows sub-grids only accepting pink items, while parent accept all.</p> | ||
| <a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a> | ||
| <a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a> | ||
| <a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a> | ||
| <span>entire save/re-create:</span> | ||
| <a class="btn btn-primary" onClick="save()" href="#">Save</a> | ||
| <a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a> | ||
| <a class="btn btn-primary" onClick="load()" href="#">Create</a> | ||
| <span>partial save/load:</span> | ||
| <a class="btn btn-primary" onClick="save(true, false)" href="#">Save list</a> | ||
| <a class="btn btn-primary" onClick="save(false, false)" href="#">Save no content</a> | ||
| <a class="btn btn-primary" onClick="destroy(false)" href="#">Clear</a> | ||
| <a class="btn btn-primary" onClick="load(false)" href="#">Load</a> | ||
| <br><br> | ||
| <!-- grid will be added here --> | ||
| </div> | ||
|
|
||
| <script type="text/javascript"> | ||
| let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}]; | ||
| let sub2 = [ {x:0, y:0}, {x:0, y:1, w:2}]; | ||
| let count = 0; | ||
| [...sub1, ...sub2].forEach(d => d.content = String(count++)); | ||
| let subOptions = { | ||
| cellHeight: 50, | ||
| column: 'auto', // size to match container. make sure to include gridstack-extra.min.css | ||
| 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 | ||
| margin: 2, | ||
| minRow: 1, // don't collapse when empty | ||
| }; | ||
| let options = { // main grid options | ||
| cellHeight: 50, | ||
| margin: 5, | ||
| minRow: 2, // don't collapse when empty | ||
| acceptWidgets: true, | ||
| id: 'main', | ||
| children: [ | ||
| {y:0, content: 'regular item'}, | ||
| {x:1, w:4, h:4, subGrid: {children: sub1, class: 'sub1', ...subOptions}}, | ||
| {x:5, w:4, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}}, | ||
| ] | ||
| }; | ||
|
|
||
| // create and load it all from JSON above | ||
| let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options); | ||
|
|
||
| addNested = function() { | ||
| grid.addWidget({x:0, y:100, content:"new item"}); | ||
| } | ||
|
|
||
| addNewWidget = function(selector) { | ||
| let subGrid = document.querySelector(selector).gridstack; | ||
| let node = { | ||
| x: Math.round(6 * Math.random()), | ||
| y: Math.round(5 * Math.random()), | ||
| w: Math.round(1 + 1 * Math.random()), | ||
| h: Math.round(1 + 1 * Math.random()), | ||
| content: String(count++) | ||
| }; | ||
| subGrid.addWidget(node); | ||
| return false; | ||
| }; | ||
|
|
||
| save = function(content = true, full = true) { | ||
| options = grid.save(content, full); | ||
| console.log(options); | ||
| // console.log(JSON.stringify(options)); | ||
| } | ||
| destroy = function(full = true) { | ||
| if (full) { | ||
| grid.destroy(); | ||
| grid = undefined; | ||
| } else { | ||
| grid.removeAll(); | ||
| } | ||
| } | ||
| load = function(full = true) { | ||
| if (full) { | ||
| grid = GridStack.addGrid(document.querySelector('.container-fluid'), options); | ||
| } else { | ||
| grid.load(options); | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.