Skip to content

Commit e079c72

Browse files
gmsagmsa
committed
implements #35, release 1.0.3
1 parent 18c279d commit e079c72

File tree

7 files changed

+167
-9
lines changed

7 files changed

+167
-9
lines changed

‎dist/vue-grid-layout.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/01-basic.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
5+
<title>Vue Grid Layout Example 1 - Basic</title>
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
77
<link rel="stylesheet" href="app.css">
88
</head>
99
<body>
1010
<h1>Vue Grid Layout Example 1 - Basic</h1>
11+
12+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
13+
<br/>
14+
<a href="02-events.html">Next example: Move and resize events</a>
15+
1116
<div id="app" style="width: 100%;">
1217
<!--<pre>{{ $data | json }}</pre>-->
1318
<div>
@@ -21,7 +26,12 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
2126
</div>
2227
</div>
2328
<div id="content">
24-
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
29+
<grid-layout :layout.sync="layout"
30+
:col-num="12"
31+
:row-height="30"
32+
:is-draggable="true"
33+
:vertical-compact="true"
34+
>
2535
<grid-item v-for="item in layout"
2636
:x.sync="item.x"
2737
:y.sync="item.y"

‎examples/02-events.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 2 - Move and resize events</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<h1>Vue Grid Layout Example 2 - Move and resize events</h1>
11+
12+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
13+
<br/>
14+
<a href="01-basic.html">Previous example: Basic</a>
15+
16+
<div id="app" style="width: 100%;">
17+
<!--<pre>{{ $data | json }}</pre>-->
18+
<div>
19+
<div class="layoutJSON">
20+
Displayed as <code>[x, y, w, h]</code>:
21+
<div class="columns">
22+
<div class="layoutItem" v-for="item in layout">
23+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
24+
</div>
25+
</div>
26+
</div>
27+
<div v-el:events-div class="eventsJSON">
28+
Events:
29+
<div v-for="event in eventLog">
30+
{{event}}
31+
</div>
32+
</div>
33+
</div>
34+
<div id="content">
35+
<!--<button @click="decreaseWidth">Decrease Width</button>
36+
<button @click="increaseWidth">Increase Width</button>
37+
<button @click="addItem">Add an item</button>-->
38+
<grid-layout :layout="layout"
39+
:col-num="12"
40+
:row-height="30"
41+
:is-draggable="true"
42+
:vertical-compact="true"
43+
>
44+
<grid-item v-for="item in layout"
45+
:x.sync="item.x"
46+
:y.sync="item.y"
47+
:w.sync="item.w"
48+
:h.sync="item.h"
49+
:i="item.i"
50+
@resize="resizeEvent"
51+
@move="moveEvent"
52+
@resized="resizedEvent"
53+
@moved="movedEvent"
54+
>
55+
<span class="text">{{item.i}}</span>
56+
</grid-item>
57+
</grid-layout>
58+
</div>
59+
<pre>{{eventLog | json}}</pre>
60+
61+
</div>
62+
<script src="vue.js"></script>
63+
<script src="../dist/vue-grid-layout.js"></script>
64+
<script src="02-events.js"></script>
65+
</body>
66+
</html>

‎examples/02-events.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
3+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
11+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
12+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
13+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
14+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
15+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
16+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
17+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
18+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
19+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
20+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
21+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
22+
];
23+
24+
//var Vue = require('vue');
25+
26+
Vue.config.debug = true;
27+
Vue.config.devtools = true;
28+
29+
var GridLayout = VueGridLayout.GridLayout;
30+
var GridItem = VueGridLayout.GridItem;
31+
32+
new Vue({
33+
el: '#app',
34+
components: {
35+
"GridLayout": GridLayout,
36+
"GridItem": GridItem
37+
},
38+
data: {
39+
layout: testLayout,
40+
index: 0,
41+
eventLog: []
42+
},
43+
watch: {
44+
eventLog: function() {
45+
var eventsDiv = this.$els.eventsDiv;
46+
eventsDiv.scrollTop = eventsDiv.scrollHeight;
47+
}
48+
},
49+
methods: {
50+
moveEvent: function(i, newX, newY){
51+
var msg = "MOVE i=" + i + ", X=" + newX + ", Y=" + newY;
52+
this.eventLog.push(msg);
53+
console.log(msg);
54+
55+
},
56+
resizeEvent: function(i, newH, newW){
57+
var msg = "RESIZE i=" + i + ", H=" + newH + ", W=" + newW;
58+
this.eventLog.push(msg);
59+
console.log(msg);
60+
},
61+
movedEvent: function(i, newX, newY){
62+
var msg = "MOVED i=" + i + ", X=" + newX + ", Y=" + newY;
63+
this.eventLog.push(msg);
64+
console.log(msg);
65+
66+
},
67+
/**
68+
*
69+
* @param i the item id/index
70+
* @param newH new height in grid rows
71+
* @param newW new width in grid columns
72+
* @param newHPx new height in pixels
73+
* @param newWPx new width in pixels
74+
*
75+
*/
76+
resizedEvent: function(i, newH, newW, newHPx, newWPx){
77+
var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
78+
this.eventLog.push(msg);
79+
console.log(msg);
80+
},
81+
}
82+
});

‎src/GridItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@
207207
});
208208
}
209209
if (this.isResizable) {
210-
if (this.interactObj === null) {
210+
if (this.interactObj === null || this.interactObj === undefined) {
211211
this.interactObj = interact(this.$els.item, {ignoreFrom: this.resizeIgnoreFrom});
212212
}
213213
this.interactObj

0 commit comments

Comments
 (0)