Skip to content

Commit 532e827

Browse files
s-montigny-desautelss-montigny-desautels
committed
Added prevent-collision options to GridLayout. Ported from react-grid-layout
1 parent d43e24f commit 532e827

13 files changed

+29650
-11907
lines changed

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

Lines changed: 8490 additions & 5943 deletions
Large diffs are not rendered by default.

‎dist/vue-grid-layout.common.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.umd.js

Lines changed: 8490 additions & 5943 deletions
Large diffs are not rendered by default.

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

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.umd.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/06-responsive.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ <h1>Vue Grid Layout Example 6 - Responsive</h1>
1313
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
1414
<br/>
1515
<a href="05-mirrored.html">Previous example: Mirrored grid layout</a>
16+
<br/>
17+
<a href="07-prevent-collision.html">Next example: Responsive</a>
1618

1719
<div id="app" style="width: 100%;">
1820
<!--<pre>{{ $data | json }}</pre>-->

‎examples/07-prevent-collision.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+
<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">-->
9+
</head>
10+
<body>
11+
<h1>Vue Grid Layout Example 8 - Prevent Collision</h1>
12+
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: Mirrored grid layout</a>
16+
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>
28+
</div>
29+
<div id="content">
30+
<!--<button @click="decreaseWidth">Decrease Width</button>
31+
<button @click="increaseWidth">Increase Width</button>
32+
<button @click="addItem">Add an item</button>-->
33+
<br/>
34+
<grid-layout :layout.sync="layout"
35+
:col-num="12"
36+
:row-height="30"
37+
:is-draggable="draggable"
38+
:is-resizable="resizable"
39+
:vertical-compact="false"
40+
:prevent-collision="true"
41+
:use-css-transforms="true"
42+
:responsive="true"
43+
>
44+
<grid-item v-for="item in layout"
45+
:x="item.x"
46+
:y="item.y"
47+
:w="item.w"
48+
:h="item.h"
49+
:i="item.i"
50+
>
51+
<span class="text">{{item.i}}</span>
52+
</grid-item>
53+
</grid-layout>
54+
</div>
55+
56+
</div>
57+
<script src="vue.min.js"></script>
58+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
59+
<script src="07-prevent-collision.js"></script>
60+
</body>
61+
</html>

‎examples/07-prevent-collision.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":5,"i":"0", static: false},
3+
{"x":2,"y":0,"w":2,"h":2,"i":"1", static: false},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
11+
{"x":6,"y":3,"w":2,"h":4,"i":"9", static: false},
12+
{"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
13+
{"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
14+
{"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
15+
{"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
16+
{"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
17+
{"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
18+
{"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
19+
{"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
20+
{"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
21+
{"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
22+
];
23+
24+
// var GridLayout = VueGridLayout.GridLayout;
25+
// var GridItem = VueGridLayout.GridItem;
26+
27+
new Vue({
28+
el: '#app',
29+
// components: {
30+
// "GridLayout": GridLayout,
31+
// "GridItem": GridItem
32+
// },
33+
data: {
34+
layout: testLayout,
35+
draggable: true,
36+
resizable: true,
37+
index: 0
38+
},
39+
40+
/*
41+
mounted: function () {
42+
this.index = this.layout.length;
43+
},
44+
*/
45+
methods: {
46+
itemTitle(item) {
47+
var result = item.i;
48+
if (item.static) {
49+
result += " - Static";
50+
}
51+
return result;
52+
}
53+
}
54+
});
55+
56+

0 commit comments

Comments
 (0)