Skip to content

Commit 2c34ceb

Browse files
gmsagmsa
committed
working dragAllowFrom, dragIgnoreFrom props on GridItem
1 parent d38c4f7 commit 2c34ceb

25 files changed

+8654
-94
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
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.1.6 (Supports Vue 2.2+)
5+
### **Current version:** 2.1.7 (Supports Vue 2.2+)
66

77
### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
8-
### **For Vue 1 use version [1.0.0](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.0)**
8+
### **For Vue 1 use version [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)**
99

1010
<br/>
1111

‎dist/vue-grid-layout.js

Lines changed: 42 additions & 42 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: 3 additions & 3 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/02-events.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
1212
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
1313
<br/>
1414
<a href="01-basic.html">Previous example: Basic</a>
15+
<br/>
16+
<a href="03-multiple-grids.html">Next example: Multiple grids</a>
1517

1618
<div id="app" style="width: 100%;">
1719
<!--<pre>{{ $data | json }}</pre>-->
@@ -58,7 +60,7 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
5860
</grid-item>
5961
</grid-layout>
6062
</div>
61-
<pre>{{eventLog | json}}</pre>
63+
<!--<pre>{{eventLog | json}}</pre>-->
6264

6365
</div>
6466
<script src="vue.min.js"></script>

‎examples/03-multiple-grids.html

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,64 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Vue Grid Layout Example 3 - Multiple instances</title>
5+
<title>Vue Grid Layout Example 3 - Multiple grids</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>
10+
<h1>Vue Grid Layout Example 3 - Multiple grids</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">Previous example: Move and resize events</a>
15+
<br/>
16+
<a href="04-allow-ignore.html">Next example: Drag allow/ignore elements</a>
17+
18+
1019
<div id="app1" style="width: 100%;">
11-
<h3> app1 </h3>
12-
<grid-layout :layout="layout"
13-
:col-num="12"
14-
:row-height="30"
15-
:is-draggable="true"
16-
:is-resizable="true"
17-
:vertical-compact="true"
18-
:use-css-transforms="true"
20+
<h3>Grid 1</h3>
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>
30+
</div>
31+
<grid-layout :layout="layout"
32+
:col-num="12"
33+
:row-height="30"
34+
:is-draggable="true"
35+
:is-resizable="true"
36+
:vertical-compact="true"
37+
:use-css-transforms="true"
38+
>
39+
<grid-item v-for="item in layout"
40+
:x="item.x"
41+
:y="item.y"
42+
:w="item.w"
43+
:h="item.h"
44+
:i="item.i"
1945
>
20-
<grid-item v-for="item in layout"
21-
:x="item.x"
22-
:y="item.y"
23-
:w="item.w"
24-
:h="item.h"
25-
:i="item.i"
26-
>
27-
<span class="text">{{item.i}}</span>
28-
</grid-item>
29-
</grid-layout>
46+
<span class="text">{{item.i}}</span>
47+
</grid-item>
48+
</grid-layout>
3049
</div>
3150
<hr/>
3251
<div id="app2" style="width: 100%;">
33-
<h3> app2 </h3>
52+
<h3>Grid 2</h3>
53+
<div>
54+
<div class="layoutJSON">
55+
Displayed as <code>[x, y, w, h]</code>:
56+
<div class="columns">
57+
<div class="layoutItem" v-for="item in layout">
58+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
59+
</div>
60+
</div>
61+
</div>
62+
</div>
3463
<grid-layout :layout="layout"
3564
:col-num="12"
3665
:row-height="30"

‎examples/04-allow-ignore.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 4 - Drag allow/ignore elements</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 4 - Drag allow/ignore elements</h1>
11+
12+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
13+
<br/>
14+
<a href="03-multiple-grids.html">Previous example: Multiple grids</a>
15+
16+
17+
<div id="app" style="width: 100%;">
18+
<!--<pre>{{ $data | json }}</pre>-->
19+
<div>
20+
<br/>
21+
Ignore drag on certain elements and allow on on others.
22+
<br/>
23+
Click and drag the dots on the corner of each item to reposition
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>
30+
</div>
31+
</div>
32+
</div>
33+
<div id="content">
34+
<!--<button @click="addItem">Add an item</button>-->
35+
<grid-layout :layout="layout"
36+
:col-num="12"
37+
:row-height="30"
38+
:is-draggable="true"
39+
:is-resizable="true"
40+
:vertical-compact="true"
41+
:use-css-transforms="true"
42+
>
43+
<grid-item v-for="item in layout"
44+
:x="item.x"
45+
:y="item.y"
46+
:w="item.w"
47+
:h="item.h"
48+
:i="item.i"
49+
drag-allow-from=".vue-draggable-handle"
50+
drag-ignore-from=".no-drag"
51+
>
52+
<div class="text">
53+
<div class="vue-draggable-handle"></div>
54+
<div class="no-drag">
55+
<span>{{item.i}}</span>
56+
<br/>
57+
<button>test</button>
58+
</div>
59+
</div>
60+
</grid-item>
61+
</grid-layout>
62+
</div>
63+
64+
</div>
65+
66+
<script src="vue.min.js"></script>
67+
<script src="../dist/vue-grid-layout.js"></script>
68+
<script type="text/javascript">
69+
Vue.config.debug = true;
70+
Vue.config.devtools = true;
71+
72+
var GridLayout = VueGridLayout.GridLayout;
73+
var GridItem = VueGridLayout.GridItem;
74+
75+
76+
new Vue({
77+
el: '#app',
78+
components: {
79+
GridLayout,
80+
GridItem,
81+
},
82+
data: {
83+
layout: [
84+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
85+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
86+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
87+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
88+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
89+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
90+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
91+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
92+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
93+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
94+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
95+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
96+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
97+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
98+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
99+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
100+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
101+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
102+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
103+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
104+
],
105+
index: 0
106+
},
107+
});
108+
109+
110+
111+
</script>
112+
</body>
113+
</html>

‎examples/app.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,13 @@
6969
left: 0;
7070
right: 0;
7171
margin: auto;
72-
height: 24px;
72+
height: 100%;
73+
width: 100%;
74+
}
75+
76+
.vue-grid-item .no-drag {
77+
height: 100%;
78+
width: 100%;
7379
}
7480

7581
.vue-grid-item .minMax {
@@ -79,3 +85,18 @@
7985
.vue-grid-item .add {
8086
cursor: pointer;
8187
}
88+
89+
.vue-draggable-handle {
90+
position: absolute;
91+
width: 20px;
92+
height: 20px;
93+
top: 0;
94+
left: 0;
95+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
96+
background-position: bottom right;
97+
padding: 0 8px 8px 0;
98+
background-repeat: no-repeat;
99+
background-origin: content-box;
100+
box-sizing: border-box;
101+
cursor: pointer;
102+
}

‎libs/interact.js-1.3.0-alpha.4/.codeclimate.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
engines:
2+
eslint:
3+
enabled: true
4+
duplication:
5+
enabled: true
6+
config:
7+
languages:
8+
- javascript
9+
10+
ratings:
11+
paths:
12+
- "src/**"
13+
14+
exclude_paths:
15+
- "examples/*"
16+
- "docs/*"
17+
- "gulp/*"
18+
- "test/*"
19+
- "gulpfile.js"
20+
- "karma.conf.js"

‎libs/interact.js-1.3.0-alpha.4/.eslintrc

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
extends: 'eslint:recommended'
2+
3+
env:
4+
commonjs: true
5+
es6: true
6+
node: true
7+
8+
plugins:
9+
- require-path-exists
10+
11+
rules:
12+
comma-dangle: [2, always-multiline]
13+
comma-style: [2, last]
14+
curly: 2
15+
dot-notation: 2
16+
eol-last: 2
17+
eqeqeq: 2
18+
guard-for-in: 0
19+
indent: [2, 2]
20+
keyword-spacing: [2, { before: true, after: true }]
21+
linebreak-style: [2, unix]
22+
no-caller: 2
23+
no-console: 0
24+
no-empty: 0
25+
no-extra-bind: 2
26+
no-self-compare: 2
27+
no-sequences: 2
28+
no-shadow-restricted-names: 2
29+
no-shadow: 2
30+
no-trailing-spaces: 2
31+
no-unused-expressions: 2
32+
no-var: 2
33+
one-var: [2, never]
34+
prefer-const: 2
35+
quotes: [2, single, avoid-escape]
36+
require-path-exists/exists: 2
37+
require-path-exists/notEmpty: 2
38+
semi: [2, always]
39+
space-before-function-paren: [2, always]
40+
41+
ecma-features:
42+
arrow-functions: true
43+
block-bindings: true
44+
classes: true
45+
for-of: true
46+
destructuring: true
47+
object-literal-computed-properties: true
48+
object-literal-shorthand-methods: true
49+
oobject-literal-shorthand-properties: true
50+
super-in-functions: true
51+
template-strings: true

0 commit comments

Comments
 (0)