Skip to content

Commit 2077892

Browse files
gmsagmsa
committed
added events example, updated readme and changelog
1 parent 586a1c6 commit 2077892

File tree

10 files changed

+326
-149
lines changed

10 files changed

+326
-149
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
# Changelog
22

3+
## 2.1.0 (Fev 6, 2017)
4+
5+
* RTL support (thanks [easteregg](https://github.com/easteregg))
6+
* Move and resize events (thanks [ThePlastic](https://github.com/ThePlastic))

‎README.md

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
44

5-
### **Current version:** 2.0.1 (Supports Vue 2.0+)
5+
### **Current version:** 2.1.0 (Supports Vue 2.0+)
66

77
### **For Vue 1 use version [1.0.0](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.0)**
88

@@ -126,6 +126,53 @@ or include the script in your html (download from [releases](https://github.com/
126126
</grid-layout>
127127
````
128128

129+
### Events
130+
131+
Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized.
132+
Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)
133+
134+
````html
135+
136+
<grid-layout
137+
:layout="layout"
138+
:col-num="12"
139+
:row-height="30"
140+
:is-draggable="true"
141+
:is-resizable="true"
142+
:vertical-compact="true"
143+
:margin="[10, 10]"
144+
:use-css-transforms="true"
145+
>
146+
147+
<grid-item v-for="item in layout"
148+
:x="item.x"
149+
:y="item.y"
150+
:w="item.w"
151+
:h="item.h"
152+
:i="item.i"
153+
@resize="resizeEvent"
154+
@move="moveEvent">
155+
{{item.i}}
156+
</grid-item>
157+
</grid-layout>
158+
````
159+
160+
* Move event: every time an item is being moved and changes position
161+
162+
```javascript
163+
moveEvent: function(i, newX, newY){
164+
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
165+
},
166+
```
167+
168+
* Resize event: every time an item is being resized and changes size
169+
170+
```javascript
171+
resizeEvent: function(i, newH, newW){
172+
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
173+
},
174+
```
175+
129176

130177
## Contribute
131178

‎dist/vue-grid-layout.js

Lines changed: 121 additions & 133 deletions
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: 6 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.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.

‎examples/01-basic.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
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>

‎examples/02-events.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<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+
</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 ref="eventsDiv" 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+
:is-resizable="true"
43+
:vertical-compact="true"
44+
:use-css-transforms="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+
@resize="resizeEvent"
53+
@move="moveEvent">
54+
<span class="text">{{item.i}}</span>
55+
</grid-item>
56+
</grid-layout>
57+
</div>
58+
<pre>{{eventLog | json}}</pre>
59+
60+
</div>
61+
<script src="vue.min.js"></script>
62+
<script src="../dist/vue-grid-layout.js"></script>
63+
<script src="02-events.js"></script>
64+
</body>
65+
</html>

‎examples/02-events.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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,
36+
GridItem,
37+
},
38+
data: {
39+
layout: testLayout,
40+
index: 0,
41+
eventLog: []
42+
},
43+
watch: {
44+
eventLog: function() {
45+
var eventsDiv = this.$refs.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+
}
62+
});
63+

‎examples/app.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@
1313
margin-top: 10px;
1414
padding: 10px;
1515
}
16+
17+
.eventsJSON {
18+
background: #ddd;
19+
border: 1px solid black;
20+
margin-top: 10px;
21+
padding: 10px;
22+
height: 100px;
23+
overflow-y: scroll;
24+
}
25+
1626
.columns {
1727
-moz-columns: 120px;
1828
-webkit-columns: 120px;

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-grid-layout",
3-
"version": "2.0.1",
3+
"version": "2.1.0",
44
"description": "A draggable and resizable grid layout, as a Vue component.",
55
"keywords": [
66
"grid",
@@ -39,10 +39,10 @@
3939
"css-loader": "^0.25.0",
4040
"file-loader": "^0.9.0",
4141
"vue-loader": "^10.0.0",
42-
"vue-template-compiler": "^2.1.8",
42+
"vue-template-compiler": "^2.1.10",
4343
"webpack": "^2.1.0-beta.25",
4444
"webpack-dev-server": "^2.1.0-beta.9",
45-
"vue": "^2.1.8"
45+
"vue": "^2.1.10"
4646
},
4747
"license": "MIT"
4848
}

0 commit comments

Comments
 (0)