Skip to content

Commit 99ba04a

Browse files
authored
Merge pull request #1577 from adumesny/develop
test for #1570
2 parents 7b05db1 + f0fa426 commit 99ba04a

File tree

2 files changed

+123
-5
lines changed

2 files changed

+123
-5
lines changed
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>drop onto full</title>
8+
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="../../../dist/gridstack.min.css"/>
11+
<script src="../../../dist/gridstack-h5.js"></script>
12+
13+
<style type="text/css">
14+
*,
15+
*::before,
16+
*::after {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: inherit;
20+
}
21+
html {
22+
height: 100vh;
23+
width: 100vw;
24+
margin: 0;
25+
box-sizing: border-box;
26+
font-size: 62.5%;
27+
background-color: white;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
overflow: hidden;
32+
background-color: rgb(216, 216, 216);
33+
}
34+
.container {
35+
width: 70vw;
36+
background-color: rgb(252, 252, 252);
37+
38+
display: grid;
39+
grid-template-rows: 100%;
40+
grid-template-columns: 5% 95%;
41+
grid-row-gap: 0px;
42+
grid-column-gap: 0px;
43+
}
44+
.side-grid-container {
45+
grid-column: 1;
46+
height: 100%;
47+
width: 100%;
48+
background-color: rgb(88, 90, 90);
49+
}
50+
.main-grid-container {
51+
grid-column: 2;
52+
height: 100%;
53+
width: 100%;
54+
background-color: rgb(92, 92, 92);
55+
}
56+
.grid-stack-item-content{
57+
background-color: rgb(206, 214, 167);
58+
font-size: large;
59+
}
60+
.right-grid{
61+
background-color: rgb(168, 193, 218);
62+
}
63+
.left-grid {
64+
background-color: rgb(114, 177, 196);
65+
}
66+
.drag-border {
67+
border: solid 5px cyan;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<div class="container">
73+
<div class="side-grid-container">
74+
<div id='side-grid' class="left-grid grid-stack">
75+
</div>
76+
</div>
77+
<div class="main-grid-container">
78+
<div id="main-grid" class="right-grid grid-stack" >
79+
</div>
80+
</div>
81+
</div>
82+
<script type="text/javascript">
83+
let options = {
84+
column: 1,
85+
margin: 5,
86+
disableResize: true
87+
}
88+
89+
let options2 = {
90+
disableOneColumnMode: true,
91+
minRow: 3,
92+
// maxRow: 3, // change this to show issue
93+
acceptWidgets: true,
94+
removable: true,
95+
removeTimeout: 0,
96+
float: true
97+
}
98+
99+
let grid1 = GridStack.init(options, '#side-grid');
100+
let grid2 = GridStack.init(options2, '#main-grid');
101+
102+
let items1 = [
103+
{x: 0, y: 0, content: "1", id: 1},
104+
{x: 0, y: 1, content: "2", id: 2},
105+
{x: 0, y: 2, content: "3", id: 3}
106+
]
107+
grid1.load(items1);
108+
109+
grid2.load([{x: 1, y: 2, content: "4", id: 4}])
110+
111+
grid2.on('removed', function(e, items) {
112+
item = items[0];
113+
item.h = item.w = 1;
114+
grid1.addWidget(item);
115+
})
116+
117+
</script>
118+
</body>
119+
</html>

spec/e2e/html/1571_drop_onto_full.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,21 +69,20 @@ <h1>drop onto full</h1>
6969
<div class="col-md-6">
7070
<a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
7171
<a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
72-
<div class="grid-stack grid-stack-6"></div>
72+
<div class="grid-stack"></div>
7373
</div>
7474
<div class="col-md-6">
7575
<a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: false</a>
7676
<a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
77-
<div class="grid-stack grid-stack-6"></div>
77+
<div class="grid-stack"></div>
7878
</div>
7979
</div>
8080
</div>
8181
<script src="../../../demo/events.js"></script>
8282
<script type="text/javascript">
8383
let options = {
8484
column: 6,
85-
minRow: 1, // don't collapse when empty
86-
maxRow: 3, // make it full
85+
row: 1,
8786
cellHeight: 70,
8887
disableOneColumnMode: true,
8988
float: false,
@@ -95,7 +94,7 @@ <h1>drop onto full</h1>
9594
};
9695
let grids = GridStack.initAll(options);
9796
grids[0].load([{x: 4, y: 0, w: 1, h: 1}])
98-
grids[1].load([{x: 0, y: 0, w: 6, h: 3}])
97+
grids[1].load([{x: 0, y: 0, w: 6, h: 1}])
9998

10099
grids.forEach(function (grid, i) {
101100
addEvents(grid, i);

0 commit comments

Comments
 (0)