Skip to content

Commit d38c4f7

Browse files
gmsagmsa
authored
Merge pull request jbaysolutions#53 from ThePlastic/master
GridItem Drag Handle
2 parents f9cdc33 + 64ebf73 commit d38c4f7

File tree

2 files changed

+84
-67
lines changed

2 files changed

+84
-67
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"author": "Gustavo Santos (JBay Solutions) <[email protected]> (http://www.jbaysolutions.com)",
2626
"dependencies": {
2727
"element-resize-detector": "^1.1.10",
28-
"interact.js": "^1.2.8"
28+
"interact.js": "git://github.com/taye/interact.js.git#master"
2929
},
3030
"devDependencies": {
3131
"babel-core": "^6.0.0",

‎src/GridItem.vue

Lines changed: 83 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,16 +261,15 @@
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
},
253271
beforeDestroy: function(){
254272
var self = this;
255-
256273
//Remove listeners
257274
this.eventBus.$off('updateWidth', self.updateWidthHandler);
258275
this.eventBus.$off('compact', self.compactHandler);
@@ -261,7 +278,7 @@
261278
this.eventBus.$off('setRowHeight', self.setRowHeightHandler);
262279
this.eventBus.$off('directionchange', self.directionchangeHandler);
263280
},
264-
mounted: function() {
281+
mounted: function () {
265282
this.cols = this.$parent.colNum;
266283
this.rowHeight = this.$parent.rowHeight;
267284
this.containerWidth = this.$parent.width !== null ? this.$parent.width : 100;
@@ -281,16 +298,16 @@
281298
this.createStyle();
282299
},
283300
watch: {
284-
isDraggable: function() {
301+
isDraggable: function () {
285302
this.draggable = this.isDraggable;
286303
},
287-
draggable: function() {
304+
draggable: function () {
288305
var self = this;
289306
if (this.interactObj == null) {
290307
this.interactObj = interact(this.$refs.item, {ignoreFrom: this.dragIgnoreFrom});
291308
}
292309
if (this.draggable) {
293-
this.interactObj.draggable({});
310+
this.interactObj.draggable({allowFrom: '.vue-draggable-handle'});
294311
if (!this.dragEventSet) {
295312
this.dragEventSet = true;
296313
this.interactObj.on('dragstart dragmove dragend', function (event) {
@@ -299,14 +316,14 @@
299316
}
300317
} else {
301318
this.interactObj.draggable({
302-
enabled:false
303-
});
319+
enabled: false
320+
});
304321
}
305322
},
306-
isResizable: function() {
307-
this.resizable = this.isResizable;
323+
isResizable: function () {
324+
this.resizable = this.isResizable;
308325
},
309-
resizable: function() {
326+
resizable: function () {
310327
var self = this;
311328
if (this.interactObj == null) {
312329
this.interactObj = interact(this.$refs.item, {ignoreFrom: this.resizeIgnoreFrom});
@@ -326,29 +343,29 @@
326343
}
327344
} else {
328345
this.interactObj.resizable({
329-
enabled:false
346+
enabled: false
330347
});
331348
}
332349
},
333-
rowHeight: function() {
350+
rowHeight: function () {
334351
this.createStyle();
335352
},
336-
cols: function() {
353+
cols: function () {
337354
this.createStyle();
338355
},
339-
containerWidth: function() {
356+
containerWidth: function () {
340357
this.createStyle();
341358
},
342-
x: function() {
359+
x: function () {
343360
this.createStyle();
344361
},
345-
y: function() {
362+
y: function () {
346363
this.createStyle();
347364
},
348-
h: function() {
365+
h: function () {
349366
this.createStyle();
350367
},
351-
w: function() {
368+
w: function () {
352369
this.createStyle();
353370
}
354371
},
@@ -362,7 +379,7 @@
362379
}
363380
},
364381
methods: {
365-
createStyle: function() {
382+
createStyle: function () {
366383
if (this.x + this.w > this.cols) {
367384
this.x = 0;
368385
this.w = this.cols;
@@ -407,7 +424,7 @@
407424
this.style = style;
408425
409426
},
410-
handleResize: function(event) {
427+
handleResize: function (event) {
411428
const position = getControlPosition(event);
412429
// Get the current drag point from the event. This is used as the offset.
413430
if (position == null) return; // not possible but satisfies flow
@@ -559,7 +576,7 @@
559576
}
560577
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
561578
},
562-
calcPosition: function(x, y, w, h) {
579+
calcPosition: function (x, y, w, h) {
563580
const colWidth = this.calcColWidth();
564581
// add rtl support
565582
if (this.rtl) {
@@ -640,13 +657,13 @@
640657
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
641658
return {w, h};
642659
},
643-
updateWidth: function(width, colNum) {
660+
updateWidth: function (width, colNum) {
644661
this.containerWidth = width;
645662
if (colNum !== undefined && colNum !== null) {
646663
this.cols = colNum;
647664
}
648665
},
649-
compact: function() {
666+
compact: function () {
650667
this.createStyle();
651668
}
652669
},

0 commit comments

Comments
 (0)