Skip to content

Commit 4020b6c

Browse files
gmsagmsa
authored
Merge pull request jbaysolutions#449 from protonbobby/master
Issue 448: Add Example 9 - Dynamic Add/Remove
2 parents 62df384 + f5b0093 commit 4020b6c

File tree

5 files changed

+203
-103
lines changed

5 files changed

+203
-103
lines changed

‎examples/07-prevent-collision.html

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,53 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="utf-8">
5-
<title>Vue Grid Layout Example 8 - Prevent Collision</title>
6-
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7-
<link rel="stylesheet" href="app.css">
8-
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
5+
<meta charset="utf-8">
6+
<title>Vue Grid Layout Example 7 - Prevent Collision</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8+
<link rel="stylesheet" href="app.css">
9+
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
910
</head>
11+
1012
<body>
11-
<h1>Vue Grid Layout Example 8 - Prevent Collision</h1>
13+
<h1>Vue Grid Layout Example 7 - Prevent Collision</h1>
1214

13-
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
14-
<br/>
15-
<a href="06-responsive.html">Previous example: Responsive</a>
16-
<br/>
17-
<a href="08-responsive-predefined-layouts.html">Next example: Responsive - predefined layouts</a>
15+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
16+
<br />
17+
<a href="06-responsive.html">Previous example: Responsive</a>
18+
<br />
19+
<a href="08-responsive-predefined-layouts.html">Next example: Responsive - predefined layouts</a>
1820

19-
<div id="app" style="width: 100%;">
20-
<!--<pre>{{ $data | json }}</pre>-->
21-
<div>
22-
<div class="layoutJSON">
23-
Displayed as <code>[x, y, w, h]</code>:
24-
<div class="columns">
25-
<div class="layoutItem" v-for="item in layout">
26-
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
27-
</div>
28-
</div>
29-
</div>
21+
<div id="app" style="width: 100%;">
22+
<!--<pre>{{ $data | json }}</pre>-->
23+
<div>
24+
<div class="layoutJSON">
25+
Displayed as <code>[x, y, w, h]</code>:
26+
<div class="columns">
27+
<div class="layoutItem" v-for="item in layout">
28+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
29+
</div>
3030
</div>
31-
<div id="content">
32-
<!--<button @click="decreaseWidth">Decrease Width</button>
31+
</div>
32+
</div>
33+
<div id="content">
34+
<!--<button @click="decreaseWidth">Decrease Width</button>
3335
<button @click="increaseWidth">Increase Width</button>
3436
<button @click="addItem">Add an item</button>-->
35-
<br/>
36-
<grid-layout :layout.sync="layout"
37-
:col-num="12"
38-
:row-height="30"
39-
:is-draggable="draggable"
40-
:is-resizable="resizable"
41-
:vertical-compact="false"
42-
:prevent-collision="true"
43-
:use-css-transforms="true"
44-
:responsive="true"
45-
>
46-
<grid-item v-for="item in layout"
47-
:x="item.x"
48-
:y="item.y"
49-
:w="item.w"
50-
:h="item.h"
51-
:i="item.i"
52-
>
53-
<span class="text">{{item.i}}</span>
54-
</grid-item>
55-
</grid-layout>
56-
</div>
57-
37+
<br />
38+
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="draggable"
39+
:is-resizable="resizable" :vertical-compact="false" :prevent-collision="true" :use-css-transforms="true"
40+
:responsive="true">
41+
<grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
42+
<span class="text">{{item.i}}</span>
43+
</grid-item>
44+
</grid-layout>
5845
</div>
59-
<script src="vue.min.js"></script>
60-
<script src="../dist/vue-grid-layout.umd.min.js"></script>
61-
<script src="07-prevent-collision.js"></script>
46+
47+
</div>
48+
<script src="vue.min.js"></script>
49+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
50+
<script src="07-prevent-collision.js"></script>
6251
</body>
63-
</html>
52+
53+
</html>

‎examples/08-responsive-predefined-layouts.html

Lines changed: 43 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,56 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="utf-8">
5-
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
6-
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7-
<link rel="stylesheet" href="app.css">
8-
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
5+
<meta charset="utf-8">
6+
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8+
<link rel="stylesheet" href="app.css">
9+
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
910
</head>
11+
1012
<body>
11-
<h1>Vue Grid Layout Example 8 - Responsive with predefined layouts</h1>
13+
<h1>Vue Grid Layout Example 8 - Responsive with predefined layouts</h1>
1214

13-
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
14-
<br/>
15-
<a href="07-prevent-collision.html">Previous example: Prevent collision</a>
15+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
16+
<br />
17+
<a href="07-prevent-collision.html">Previous example: Prevent collision</a>
18+
<br />
19+
<a href="09-dynamic-add-remove.html">Next example: Dynamic Add/Remove</a>
1620

17-
<div id="app" style="width: 100%;">
18-
<!--<pre>{{ $data | json }}</pre>-->
19-
<div>
20-
<div class="layoutJSON">
21-
Displayed as <code>[x, y, w, h]</code>:
22-
<div class="columns">
23-
<div class="layoutItem" v-for="item in layout">
24-
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
25-
</div>
26-
</div>
27-
</div>
21+
<div id="app" style="width: 100%;">
22+
<!--<pre>{{ $data | json }}</pre>-->
23+
<div>
24+
<div class="layoutJSON">
25+
Displayed as <code>[x, y, w, h]</code>:
26+
<div class="columns">
27+
<div class="layoutItem" v-for="item in layout">
28+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
29+
</div>
2830
</div>
29-
<div id="content">
30-
<!--<button @click="decreaseWidth">Decrease Width</button>
31+
</div>
32+
</div>
33+
<div id="content">
34+
<!--<button @click="decreaseWidth">Decrease Width</button>
3135
<button @click="increaseWidth">Increase Width</button>
3236
<button @click="addItem">Add an item</button>-->
33-
<input type="checkbox" v-model="draggable"/> Draggable
34-
<input type="checkbox" v-model="resizable"/> Resizable
35-
<input type="checkbox" v-model="responsive"/> Responsive
36-
<br/>
37-
<grid-layout :layout.sync="layout"
38-
:responsive-layouts="layouts"
39-
:col-num="12"
40-
:row-height="30"
41-
:is-draggable="draggable"
42-
:is-resizable="resizable"
43-
:vertical-compact="true"
44-
:use-css-transforms="true"
45-
:responsive="responsive"
46-
@breakpoint-changed="breakpointChangedEvent"
47-
>
48-
<grid-item v-for="item in layout"
49-
:x="item.x"
50-
:y="item.y"
51-
:w="item.w"
52-
:h="item.h"
53-
:i="item.i"
54-
>
55-
<span class="text">{{item.i}}</span>
56-
</grid-item>
57-
</grid-layout>
58-
</div>
59-
37+
<input type="checkbox" v-model="draggable" /> Draggable
38+
<input type="checkbox" v-model="resizable" /> Resizable
39+
<input type="checkbox" v-model="responsive" /> Responsive
40+
<br />
41+
<grid-layout :layout.sync="layout" :responsive-layouts="layouts" :col-num="12" :row-height="30"
42+
:is-draggable="draggable" :is-resizable="resizable" :vertical-compact="true" :use-css-transforms="true"
43+
:responsive="responsive" @breakpoint-changed="breakpointChangedEvent">
44+
<grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
45+
<span class="text">{{item.i}}</span>
46+
</grid-item>
47+
</grid-layout>
6048
</div>
61-
<script src="vue.min.js"></script>
62-
<script src="../dist/vue-grid-layout.umd.min.js"></script>
63-
<script src="08-responsive-predefined-layouts.js"></script>
49+
50+
</div>
51+
<script src="vue.min.js"></script>
52+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
53+
<script src="08-responsive-predefined-layouts.js"></script>
6454
</body>
55+
6556
</html>

‎examples/09-dynamic-add-remove.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Vue Grid Layout Example 9 - Dynamic Add/Remove</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
8+
<link rel="stylesheet" href="app.css" />
9+
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
10+
</head>
11+
12+
<style>
13+
.remove {
14+
position: absolute;
15+
right: 2px;
16+
top: 0;
17+
cursor: pointer;
18+
}
19+
</style>
20+
21+
<body>
22+
<h1>Vue Grid Layout Example 9 - Dynamic Add/Remove</h1>
23+
24+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
25+
<br />
26+
<a href="08-responsive-predefined-layouts.html">Previous example: Responsive - predefined layouts</a>
27+
28+
<div id="app" style="width: 100%;">
29+
<!--<pre>{{ $data | json }}</pre>-->
30+
<div>
31+
<div class="layoutJSON">
32+
Displayed as <code>[x, y, w, h]</code>:
33+
<div class="columns">
34+
<div class="layoutItem" v-for="item in layout">
35+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}},
36+
{{item.h}}]
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
<div id="content">
42+
<button @click="addItem">Add an item dynamically</button>
43+
<input type="checkbox" v-model="draggable" /> Draggable
44+
<input type="checkbox" v-model="resizable" /> Resizable
45+
<br />
46+
<grid-layout :layout="layout" :col-num="colNum" :row-height="30" :is-draggable="draggable"
47+
:is-resizable="resizable" :vertical-compact="true" :use-css-transforms="true">
48+
<grid-item v-for="item in layout" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
49+
:i="item.i">
50+
<span class="text">{{item.i}}</span>
51+
<span class="remove" @click="removeItem(item.i)">x</span>
52+
</grid-item>
53+
</grid-layout>
54+
</div>
55+
</div>
56+
<script src="vue.min.js"></script>
57+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
58+
<script src="09-dynamic-add-remove.js"></script>
59+
</body>
60+
61+
</html>

‎examples/09-dynamic-add-remove.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
var testLayout = [
2+
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
3+
{ x: 2, y: 0, w: 2, h: 2, i: "1" },
4+
{ x: 4, y: 0, w: 2, h: 2, i: "2" },
5+
{ x: 6, y: 0, w: 2, h: 2, i: "3" },
6+
{ x: 8, y: 0, w: 2, h: 2, i: "4" },
7+
];
8+
9+
// var GridLayout = VueGridLayout.GridLayout;
10+
// var GridItem = VueGridLayout.GridItem;
11+
12+
new Vue({
13+
el: "#app",
14+
// components: {
15+
// "GridLayout": GridLayout,
16+
// "GridItem": GridItem
17+
// },
18+
data: {
19+
layout: testLayout,
20+
draggable: true,
21+
resizable: true,
22+
responsive: true,
23+
colNum: 12,
24+
index: 0,
25+
},
26+
mounted: function () {
27+
this.index = this.layout.length;
28+
},
29+
methods: {
30+
addItem: function () {
31+
// Add a new item. It must have a unique key!
32+
this.layout.push({
33+
x: (this.layout.length * 2) % (this.colNum || 12),
34+
y: this.layout.length + (this.colNum || 12), // puts it at the bottom
35+
w: 2,
36+
h: 2,
37+
i: this.index,
38+
});
39+
// Increment the counter to ensure key is always unique.
40+
this.index++;
41+
},
42+
removeItem: function (val) {
43+
this.layout = this.layout.filter((item) => item.i !== val);
44+
},
45+
},
46+
});

‎src/App.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<button @click="decreaseWidth">Decrease Width</button>
2525
<button @click="increaseWidth">Increase Width</button>
2626
<button @click="addItem">Add an item</button>
27+
<button @click="addItemDynamically">Add an item dynamically</button>
2728
<!-- Add to show rtl support -->
2829
<button @click="changeDirection">Change Direction</button>
2930
<input type="checkbox" v-model="draggable"/> Draggable
@@ -189,6 +190,17 @@
189190
this.index++;
190191
this.layout.push(item);
191192
},
193+
addItemDynamically: function() {
194+
let item = {
195+
x: (this.layout.length * 2) % (this.colNum || 12),
196+
y: this.layout.length + (this.colNum || 12),
197+
w: 2,
198+
h: 2,
199+
i: this.index+"",
200+
}
201+
this.index++;
202+
this.layout.push(item);
203+
},
192204
move: function(i, newX, newY){
193205
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
194206
},

0 commit comments

Comments
 (0)