Skip to content

Commit ae95473

Browse files
gmsagmsa
committed
1 parent 65c8a27 commit ae95473

File tree

2 files changed

+50
-30
lines changed

2 files changed

+50
-30
lines changed

‎src/App.vue

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
:min-w="2"
4141
:min-h="2"
4242
:i="item.i"
43+
:is-draggable="item.draggable"
44+
:is-resizable="item.resizable"
4345
@resize="resize"
4446
@move="move"
4547
@resized="resized"
@@ -61,26 +63,26 @@
6163
var eventBus = require('./eventBus');
6264
6365
var testLayout = [
64-
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
65-
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
66-
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
67-
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
68-
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
69-
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
70-
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
71-
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
72-
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
73-
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
74-
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
75-
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
76-
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
77-
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
78-
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
79-
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
80-
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
81-
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
82-
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
83-
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
66+
{"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true},
67+
{"x":2,"y":0,"w":2,"h":4,"i":"1", resizable: null, draggable: null},
68+
{"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false},
69+
{"x":6,"y":0,"w":2,"h":3,"i":"3", resizable: false, draggable: false},
70+
{"x":8,"y":0,"w":2,"h":3,"i":"4", resizable: false, draggable: false},
71+
{"x":10,"y":0,"w":2,"h":3,"i":"5", resizable: false, draggable: false},
72+
{"x":0,"y":5,"w":2,"h":5,"i":"6", resizable: false, draggable: false},
73+
{"x":2,"y":5,"w":2,"h":5,"i":"7", resizable: false, draggable: false},
74+
{"x":4,"y":5,"w":2,"h":5,"i":"8", resizable: false, draggable: false},
75+
{"x":6,"y":4,"w":2,"h":4,"i":"9", resizable: false, draggable: false},
76+
{"x":8,"y":4,"w":2,"h":4,"i":"10", resizable: false, draggable: false},
77+
{"x":10,"y":4,"w":2,"h":4,"i":"11", resizable: false, draggable: false},
78+
{"x":0,"y":10,"w":2,"h":5,"i":"12", resizable: false, draggable: false},
79+
{"x":2,"y":10,"w":2,"h":5,"i":"13", resizable: false, draggable: false},
80+
{"x":4,"y":8,"w":2,"h":4,"i":"14", resizable: false, draggable: false},
81+
{"x":6,"y":8,"w":2,"h":4,"i":"15", resizable: false, draggable: false},
82+
{"x":8,"y":10,"w":2,"h":5,"i":"16", resizable: false, draggable: false},
83+
{"x":10,"y":4,"w":2,"h":2,"i":"17", resizable: false, draggable: false},
84+
{"x":0,"y":9,"w":2,"h":3,"i":"18", resizable: false, draggable: false},
85+
{"x":2,"y":6,"w":2,"h":2,"i":"19", resizable: false, draggable: false}
8486
];
8587
8688
export default {

‎src/GridItem.vue

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div ref="item"
33
class="vue-grid-item"
4-
:class="{ 'vue-resizable' : isResizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
4+
:class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
55
:style="style"
66
>
77
<slot></slot>
8-
<span v-if="isResizable" ref="handle" :class="resizableHandleClass"></span>
8+
<span v-if="resizable" ref="handle" :class="resizableHandleClass"></span>
99
</div>
1010
</template>
1111
<style>
@@ -164,8 +164,8 @@
164164
rowHeight: 30,
165165
margin: [10, 10],
166166
maxRows: Infinity,
167-
// isDraggable: null,
168-
// isResizable: null,
167+
draggable: null,
168+
resizable: null,
169169
useCssTransforms: true,
170170
171171
isDragging: false,
@@ -201,11 +201,15 @@
201201
};
202202
203203
self.setDraggableHandler = function(isDraggable) {
204-
self.isDraggable = isDraggable;
204+
if (self.isDraggable === null) {
205+
self.draggable = isDraggable;
206+
}
205207
};
206208
207209
self.setResizableHandler = function(isResizable) {
208-
self.isResizable = isResizable;
210+
if (self.isResizable === null) {
211+
self.resizable = isResizable;
212+
}
209213
};
210214
211215
self.setRowHeightHandler = function(rowHeight) {
@@ -250,18 +254,29 @@
250254
this.containerWidth = this.$parent.width !== null ? this.$parent.width : 100;
251255
this.margin = this.$parent.margin !== undefined ? this.$parent.margin : [10, 10];
252256
this.maxRows = this.$parent.maxRows;
253-
this.isDraggable = this.$parent.isDraggable;
254-
this.isResizable = this.$parent.isResizable;
257+
if (this.isDraggable === null) {
258+
this.draggable = this.$parent.isDraggable;
259+
} else {
260+
this.draggable = this.isDraggable;
261+
}
262+
if (this.isResizable === null) {
263+
this.resizable = this.$parent.isResizable;
264+
} else {
265+
this.resizable = this.isResizable;
266+
}
255267
this.useCssTransforms = this.$parent.useCssTransforms;
256268
this.createStyle();
257269
},
258270
watch: {
259271
isDraggable: function() {
272+
this.draggable = this.isDraggable;
273+
},
274+
draggable: function() {
260275
var self = this;
261276
if (this.interactObj == null) {
262277
this.interactObj = interact(this.$refs.item, {ignoreFrom: "a, button"});
263278
}
264-
if (this.isDraggable) {
279+
if (this.draggable) {
265280
this.interactObj.draggable({});
266281
if (!this.dragEventSet) {
267282
this.dragEventSet = true;
@@ -276,11 +291,14 @@
276291
}
277292
},
278293
isResizable: function() {
294+
this.resizable = this.isResizable;
295+
},
296+
resizable: function() {
279297
var self = this;
280298
if (this.interactObj == null) {
281299
this.interactObj = interact(this.$refs.item, {ignoreFrom: "a, button"});
282300
}
283-
if (this.isResizable) {
301+
if (this.resizable) {
284302
this.interactObj
285303
.resizable({
286304
preserveAspectRatio: false,

0 commit comments

Comments
 (0)