Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bd815c4

Browse files
trooleetroolee
committed
nested grids
1 parent 7f07ef1 commit bd815c4

File tree

3 files changed

+100
-10
lines changed

3 files changed

+100
-10
lines changed

‎demo/nested.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--[if lt IE 9]>
5+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
6+
<![endif]-->
7+
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<title>Nested grids demo</title>
12+
13+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
14+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
15+
<link rel="stylesheet" href="../gridstack.css"/>
16+
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
18+
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
19+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
21+
<script src="../gridstack.js"></script>
22+
23+
<style type="text/css">
24+
.grid-stack {
25+
background: lightgoldenrodyellow;
26+
}
27+
28+
.grid-stack-item-content {
29+
color: #2c3e50;
30+
text-align: center;
31+
background-color: #18bc9c;
32+
}
33+
34+
.grid-stack .grid-stack {
35+
/*margin: 0 -10px;*/
36+
background: rgba(255, 255, 255, 0.3);
37+
}
38+
39+
.grid-stack .grid-stack .grid-stack-item-content {
40+
background: lightpink;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div class="container-fluid">
46+
<h1>Nested grids demo</h1>
47+
48+
<div class="grid-stack">
49+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
50+
<div class="grid-stack-item-content">
51+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
52+
</div>
53+
</div>
54+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
55+
<div class="grid-stack-item-content">
56+
57+
<div class="grid-stack">
58+
<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>
59+
<div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
60+
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
61+
<div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
62+
63+
<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">5</div></div>
64+
<div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
65+
</div>
66+
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
73+
<script type="text/javascript">
74+
$(function () {
75+
var options = {
76+
};
77+
$('.grid-stack').gridstack(options);
78+
});
79+
</script>
80+
</body>
81+
</html>

‎gridstack.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
bottom: 0;
1616
width: auto;
1717
z-index: 0 !important;
18-
overflow: auto;
1918
}
2019
.grid-stack > .grid-stack-item {
2120
min-width: 8.33333333%;
@@ -31,7 +30,8 @@
3130
bottom: 0;
3231
width: auto;
3332
z-index: 0 !important;
34-
overflow: auto;
33+
overflow-x: hidden;
34+
overflow-y: auto;
3535
}
3636
.grid-stack > .grid-stack-item > .ui-resizable-handle {
3737
position: absolute;

‎gridstack.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,9 @@
362362

363363
this.container = $(el);
364364

365+
opts.item_class = opts.item_class || 'grid-stack-item';
366+
var is_nested = this.container.closest('.' + opts.item_class).size() > 0;
367+
365368
this.opts = _.defaults(opts || {}, {
366369
width: parseInt(this.container.attr('data-gs-width')) || 12,
367370
height: parseInt(this.container.attr('data-gs-height')) || 0,
@@ -382,12 +385,17 @@
382385
}),
383386
draggable: _.defaults(opts.draggable || {}, {
384387
handle: '.grid-stack-item-content',
385-
scroll: true,
388+
scroll: false,
386389
appendTo: 'body'
387390
})
388391
});
392+
this.opts.is_nested = is_nested;
389393

390394
this.container.addClass(this.opts._class);
395+
if (is_nested) {
396+
this.container.addClass('grid-stack-nested');
397+
}
398+
391399
this._init_styles();
392400

393401
this.grid = new GridStackEngine(this.opts.width, function (nodes) {
@@ -410,7 +418,7 @@
410418

411419
if (this.opts.auto) {
412420
var elements = [];
413-
this.container.find('.' + this.opts.item_class).each(function (index, el) {
421+
this.container.children('.' + this.opts.item_class).each(function (index, el) {
414422
el = $(el);
415423
elements.push({
416424
el: el,
@@ -600,7 +608,8 @@
600608
}
601609
self.grid.move_node(node, x, y);
602610
self._update_container_height();
603-
}
611+
},
612+
containment: this.opts.is_nested ? this.container.parent() : null
604613
})).resizable(_.extend(this.opts.resizable, {
605614
start: on_start_moving,
606615
stop: on_end_moving,
@@ -713,13 +722,13 @@
713722
};
714723

715724
GridStack.prototype.disable = function () {
716-
this.movable(this.container.find('.' + this.opts.item_class), false);
717-
this.resizable(this.container.find('.' + this.opts.item_class), false);
725+
this.movable(this.container.children('.' + this.opts.item_class), false);
726+
this.resizable(this.container.children('.' + this.opts.item_class), false);
718727
};
719728

720729
GridStack.prototype.enable = function () {
721-
this.movable(this.container.find('.' + this.opts.item_class), true);
722-
this.resizable(this.container.find('.' + this.opts.item_class), true);
730+
this.movable(this.container.children('.' + this.opts.item_class), true);
731+
this.resizable(this.container.children('.' + this.opts.item_class), true);
723732
};
724733

725734
GridStack.prototype.locked = function (el, val) {
@@ -798,7 +807,7 @@
798807
};
799808

800809
GridStack.prototype.cell_width = function () {
801-
var o = this.container.find('.' + this.opts.item_class).first();
810+
var o = this.container.children('.' + this.opts.item_class).first();
802811
return Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
803812
};
804813

0 commit comments

Comments
 (0)