Skip to content

Commit 30da015

Browse files
gmsagmsa
committed
implements jbaysolutions#23, dynamic enable/disable dragging and resizing
1 parent 2077892 commit 30da015

File tree

8 files changed

+93
-44
lines changed

8 files changed

+93
-44
lines changed

‎dist/vue-grid-layout.js

Lines changed: 4 additions & 4 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 & 6 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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,14 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
2929
<!--<button @click="decreaseWidth">Decrease Width</button>
3030
<button @click="increaseWidth">Increase Width</button>
3131
<button @click="addItem">Add an item</button>-->
32+
<input type="checkbox" v-model="draggable"/> Draggable
33+
<input type="checkbox" v-model="resizable"/> Resizable
34+
<br/>
3235
<grid-layout :layout="layout"
3336
:col-num="12"
3437
:row-height="30"
35-
:is-draggable="true"
36-
:is-resizable="true"
38+
:is-draggable="draggable"
39+
:is-resizable="resizable"
3740
:vertical-compact="true"
3841
:use-css-transforms="true"
3942
>

‎examples/01-basic.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ new Vue({
3737
},
3838
data: {
3939
layout: testLayout,
40+
draggable: true,
41+
resizable: true,
4042
index: 0
4143
},
4244
/*

‎src/App.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@
1818
<button @click="addItem">Add an item</button>
1919
<!-- Add to show rtl support -->
2020
<button @click="changeDirection">Change Direction</button>
21+
<input type="checkbox" v-model="draggable"/> Draggable
22+
<input type="checkbox" v-model="resizable"/> Resizable
2123
<br/>
2224
<grid-layout
2325
:layout="layout"
2426
:col-num="12"
2527
:row-height="30"
26-
:is-draggable="true"
27-
:is-resizable="true"
28+
:is-draggable="draggable"
29+
:is-resizable="resizable"
2830
:vertical-compact="true"
2931
:use-css-transforms="true"
3032
>
@@ -86,6 +88,8 @@
8688
data () {
8789
return {
8890
layout: JSON.parse(JSON.stringify(testLayout)),
91+
draggable: true,
92+
resizable: true,
8993
colNum: 0,
9094
index: 0
9195
}

‎src/GridItem.vue

Lines changed: 62 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,18 @@
9696
maxRows: {
9797
type: Number,
9898
required: true
99-
},
99+
},*/
100100
isDraggable: {
101101
type: Boolean,
102-
required: true
102+
required: false,
103+
default: null
103104
},
104105
isResizable: {
105106
type: Boolean,
106-
required: true
107+
required: false,
108+
default: null
107109
},
108-
useCssTransforms: {
110+
/*useCssTransforms: {
109111
type: Boolean,
110112
required: true
111113
},
@@ -162,8 +164,8 @@
162164
rowHeight: 30,
163165
margin: [10, 10],
164166
maxRows: Infinity,
165-
isDraggable: true,
166-
isResizable: true,
167+
// isDraggable: null,
168+
// isResizable: null,
167169
useCssTransforms: true,
168170
169171
isDragging: false,
@@ -175,7 +177,10 @@
175177
lastW: NaN,
176178
lastH: NaN,
177179
style: {},
178-
rtl: false
180+
rtl: false,
181+
182+
dragEventSet: false,
183+
resizeEventSet: false
179184
}
180185
},
181186
created () {
@@ -186,6 +191,18 @@
186191
eventBus.$on('compact', function(layout) {
187192
self.compact(layout);
188193
});
194+
eventBus.$on('setDraggable', function(isDraggable) {
195+
self.isDraggable = isDraggable;
196+
});
197+
eventBus.$on('setResizable', function(isResizable) {
198+
self.isResizable = isResizable;
199+
});
200+
/*eventBus.$on('setRowHeight', function(rowHeight) {
201+
this.rowHeight = rowHeight;
202+
});
203+
eventBus.$on('setColNum', function(colNum) {
204+
this.cols = colNum;
205+
});*/
189206
var direction = (document.dir !=undefined) ?
190207
document.dir :
191208
document.getElementsByTagName("html")[0].getAttribute("dir");
@@ -208,34 +225,51 @@
208225
this.isResizable = this.$parent.isResizable;
209226
this.useCssTransforms = this.$parent.useCssTransforms;
210227
this.createStyle();
211-
212-
var self = this;
213-
if (this.isDraggable) {
228+
},
229+
watch: {
230+
isDraggable: function() {
231+
var self = this;
214232
if (this.interactObj == null) {
215233
this.interactObj = interact(this.$refs.item);
216234
}
217-
this.interactObj
218-
.draggable({
219-
})
220-
.on('dragstart dragmove dragend', function(event) {
221-
self.handleDrag(event);
222-
});
223-
}
224-
if (this.isResizable) {
235+
if (this.isDraggable) {
236+
this.interactObj.draggable({});
237+
if (!this.dragEventSet) {
238+
this.dragEventSet = true;
239+
this.interactObj.on('dragstart dragmove dragend', function (event) {
240+
self.handleDrag(event);
241+
});
242+
}
243+
} else {
244+
this.interactObj.draggable({
245+
enabled:false
246+
});
247+
}
248+
},
249+
isResizable: function() {
250+
var self = this;
225251
if (this.interactObj == null) {
226252
this.interactObj = interact(this.$refs.item);
227253
}
228-
this.interactObj
229-
.resizable({
230-
preserveAspectRatio: false,
231-
edges: {left: false, right: true, bottom: true, top: false}
232-
})
233-
.on('resizestart resizemove resizeend', function (event) {
234-
self.handleResize(event);
254+
if (this.isResizable) {
255+
this.interactObj
256+
.resizable({
257+
preserveAspectRatio: false,
258+
edges: {left: false, right: true, bottom: true, top: false}
259+
});
260+
if (!this.resizeEventSet) {
261+
this.resizeEventSet = true;
262+
this.interactObj
263+
.on('resizestart resizemove resizeend', function (event) {
264+
self.handleResize(event);
265+
});
266+
}
267+
} else {
268+
this.interactObj.resizable({
269+
enabled:false
235270
});
236-
}
237-
},
238-
watch: {
271+
}
272+
},
239273
cols: function() {
240274
this.createStyle();
241275
},

‎src/GridLayout.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,12 +151,18 @@
151151
},
152152
layout: function () {
153153
this.layoutUpdate();
154+
},
155+
isDraggable: function() {
156+
eventBus.$emit("setDraggable", this.isDraggable);
157+
},
158+
isResizable: function() {
159+
eventBus.$emit("setResizable", this.isResizable);
154160
}
155161
},
156162
methods: {
157163
layoutUpdate() {
158164
if (this.layout !== undefined && this.layout.length !== this.lastLayoutLength) {
159-
console.log("### LAYOUT UPDATE!");
165+
// console.log("### LAYOUT UPDATE!");
160166
this.lastLayoutLength = this.layout.length;
161167
compact(this.layout, this.verticalCompact);
162168

0 commit comments

Comments
 (0)