Skip to content

Commit 16c930b

Browse files
ThePlasticThePlastic
authored
Update GridItem.vue
1 parent 3aa4924 commit 16c930b

File tree

1 file changed

+84
-66
lines changed

1 file changed

+84
-66
lines changed

‎src/GridItem.vue

Lines changed: 84 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<div ref="item"
3-
class="vue-grid-item"
4-
:class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
5-
:style="style"
6-
>
3+
class="vue-grid-item"
4+
:class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
5+
:style="style"
6+
>
77
<slot></slot>
88
<span v-if="resizable" ref="handle" :class="resizableHandleClass"></span>
9+
<span v-if="draggable" ref="dragHandle" class="vue-draggable-handle"></span>
910
</div>
1011
</template>
1112
<style>
@@ -14,9 +15,11 @@
1415
transition-property: left, top, right;
1516
/* add right for rtl */
1617
}
18+
1719
.vue-grid-item.cssTransforms {
1820
transition-property: transform;
1921
}
22+
2023
.vue-grid-item.resizing {
2124
opacity: 0.6;
2225
z-index: 3;
@@ -39,6 +42,21 @@
3942
user-select: none;
4043
}
4144
45+
.vue-grid-item > .vue-draggable-handle {
46+
position: absolute;
47+
width: 20px;
48+
height: 20px;
49+
top: 0;
50+
left: 0;
51+
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;
52+
background-position: bottom right;
53+
padding: 0 8px 8px 0;
54+
background-repeat: no-repeat;
55+
background-origin: content-box;
56+
box-sizing: border-box;
57+
cursor: pointer;
58+
}
59+
4260
.vue-grid-item > .vue-resizable-handle {
4361
position: absolute;
4462
width: 20px;
@@ -69,34 +87,34 @@
6987
<script>
7088
import {setTopLeft, setTopRight, setTransformRtl, setTransform, createMarkup, getLayoutItem} from './utils';
7189
import {getControlPosition, offsetXYFromParentOf, createCoreData} from './draggableUtils';
72-
// var eventBus = require('./eventBus');
90+
// var eventBus = require('./eventBus');
7391
74-
var interact = require("interact.js");
92+
var interact = require("interactjs");
7593
7694
export default {
7795
name: "GridItem",
7896
props: {
7997
/*cols: {
80-
type: Number,
81-
required: true
82-
},*/
98+
type: Number,
99+
required: true
100+
},*/
83101
/*containerWidth: {
84-
type: Number,
85-
required: true
86-
87-
},
88-
rowHeight: {
89-
type: Number,
90-
required: true
91-
},
92-
margin: {
93-
type: Array,
94-
required: true
95-
},
96-
maxRows: {
97-
type: Number,
98-
required: true
99-
},*/
102+
type: Number,
103+
required: true
104+
105+
},
106+
rowHeight: {
107+
type: Number,
108+
required: true
109+
},
110+
margin: {
111+
type: Array,
112+
required: true
113+
},
114+
maxRows: {
115+
type: Number,
116+
required: true
117+
},*/
100118
isDraggable: {
101119
type: Boolean,
102120
required: false,
@@ -108,15 +126,15 @@
108126
default: null
109127
},
110128
/*useCssTransforms: {
111-
type: Boolean,
112-
required: true
113-
},
114-
static: {
115-
type: Boolean,
116-
required: false,
117-
default: false
118-
},
119-
*/
129+
type: Boolean,
130+
required: true
131+
},
132+
static: {
133+
type: Boolean,
134+
required: false,
135+
default: false
136+
},
137+
*/
120138
minH: {
121139
type: Number,
122140
required: false,
@@ -168,7 +186,7 @@
168186
}
169187
},
170188
inject: ["eventBus"],
171-
data: function() {
189+
data: function () {
172190
return {
173191
cols: 1,
174192
containerWidth: 100,
@@ -203,27 +221,27 @@
203221
var self = this;
204222
205223
// Accessible refernces of functions for removing in beforeDestroy
206-
self.updateWidthHandler = function(width) {
224+
self.updateWidthHandler = function (width) {
207225
self.updateWidth(width);
208226
};
209227
210-
self.compactHandler = function(layout) {
228+
self.compactHandler = function (layout) {
211229
self.compact(layout);
212230
};
213231
214-
self.setDraggableHandler = function(isDraggable) {
232+
self.setDraggableHandler = function (isDraggable) {
215233
if (self.isDraggable === null) {
216234
self.draggable = isDraggable;
217235
}
218236
};
219237
220-
self.setResizableHandler = function(isResizable) {
238+
self.setResizableHandler = function (isResizable) {
221239
if (self.isResizable === null) {
222240
self.resizable = isResizable;
223241
}
224242
};
225243
226-
self.setRowHeightHandler = function(rowHeight) {
244+
self.setRowHeightHandler = function (rowHeight) {
227245
self.rowHeight = rowHeight;
228246
};
229247
@@ -243,14 +261,14 @@
243261
this.eventBus.$on('directionchange', self.directionchangeHandler);
244262
245263
/*this.eventBus.$on('setColNum', function(colNum) {
246-
self.cols = colNum;
247-
});*/
248-
var direction = (document.dir !=undefined) ?
264+
self.cols = colNum;
265+
});*/
266+
var direction = (document.dir != undefined) ?
249267
document.dir :
250268
document.getElementsByTagName("html")[0].getAttribute("dir");
251269
this.rtl = (direction == "rtl");
252270
},
253-
beforeDestroy: function(){
271+
beforeDestroy: function () {
254272
//Remove listeners
255273
this.eventBus.$off('updateWidth', self.updateWidthHandler);
256274
this.eventBus.$off('compact', self.compactHandler);
@@ -259,7 +277,7 @@
259277
this.eventBus.$off('setRowHeight', self.setRowHeightHandler);
260278
this.eventBus.$off('directionchange', self.directionchangeHandler);
261279
},
262-
mounted: function() {
280+
mounted: function () {
263281
this.cols = this.$parent.colNum;
264282
this.rowHeight = this.$parent.rowHeight;
265283
this.containerWidth = this.$parent.width !== null ? this.$parent.width : 100;
@@ -279,16 +297,16 @@
279297
this.createStyle();
280298
},
281299
watch: {
282-
isDraggable: function() {
300+
isDraggable: function () {
283301
this.draggable = this.isDraggable;
284302
},
285-
draggable: function() {
303+
draggable: function () {
286304
var self = this;
287305
if (this.interactObj == null) {
288306
this.interactObj = interact(this.$refs.item, {ignoreFrom: this.dragIgnoreFrom});
289307
}
290308
if (this.draggable) {
291-
this.interactObj.draggable({});
309+
this.interactObj.draggable({allowFrom: '.vue-draggable-handle'});
292310
if (!this.dragEventSet) {
293311
this.dragEventSet = true;
294312
this.interactObj.on('dragstart dragmove dragend', function (event) {
@@ -297,14 +315,14 @@
297315
}
298316
} else {
299317
this.interactObj.draggable({
300-
enabled:false
301-
});
318+
enabled: false
319+
});
302320
}
303321
},
304-
isResizable: function() {
305-
this.resizable = this.isResizable;
322+
isResizable: function () {
323+
this.resizable = this.isResizable;
306324
},
307-
resizable: function() {
325+
resizable: function () {
308326
var self = this;
309327
if (this.interactObj == null) {
310328
this.interactObj = interact(this.$refs.item, {ignoreFrom: resizeIgnoreFrom});
@@ -324,29 +342,29 @@
324342
}
325343
} else {
326344
this.interactObj.resizable({
327-
enabled:false
345+
enabled: false
328346
});
329347
}
330348
},
331-
rowHeight: function() {
349+
rowHeight: function () {
332350
this.createStyle();
333351
},
334-
cols: function() {
352+
cols: function () {
335353
this.createStyle();
336354
},
337-
containerWidth: function() {
355+
containerWidth: function () {
338356
this.createStyle();
339357
},
340-
x: function() {
358+
x: function () {
341359
this.createStyle();
342360
},
343-
y: function() {
361+
y: function () {
344362
this.createStyle();
345363
},
346-
h: function() {
364+
h: function () {
347365
this.createStyle();
348366
},
349-
w: function() {
367+
w: function () {
350368
this.createStyle();
351369
}
352370
},
@@ -360,7 +378,7 @@
360378
}
361379
},
362380
methods: {
363-
createStyle: function() {
381+
createStyle: function () {
364382
if (this.x + this.w > this.cols) {
365383
this.x = 0;
366384
this.w = this.cols;
@@ -405,7 +423,7 @@
405423
this.style = style;
406424
407425
},
408-
handleResize: function(event) {
426+
handleResize: function (event) {
409427
const position = getControlPosition(event);
410428
// Get the current drag point from the event. This is used as the offset.
411429
if (position == null) return; // not possible but satisfies flow
@@ -557,7 +575,7 @@
557575
}
558576
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
559577
},
560-
calcPosition: function(x, y, w, h) {
578+
calcPosition: function (x, y, w, h) {
561579
const colWidth = this.calcColWidth();
562580
// add rtl support
563581
if (this.rtl) {
@@ -638,13 +656,13 @@
638656
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
639657
return {w, h};
640658
},
641-
updateWidth: function(width, colNum) {
659+
updateWidth: function (width, colNum) {
642660
this.containerWidth = width;
643661
if (colNum !== undefined && colNum !== null) {
644662
this.cols = colNum;
645663
}
646664
},
647-
compact: function() {
665+
compact: function () {
648666
this.createStyle();
649667
}
650668
},

0 commit comments

Comments
 (0)