This repository has been archived by the owner on Jun 19, 2018. It is now read-only.
/
mwlDraggable.js
115 lines (92 loc) · 2.79 KB
/
mwlDraggable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
'use strict';
var angular = require('angular');
angular
.module('mwl.calendar')
.controller('MwlDraggableCtrl', function($element, $scope, $window, $parse, $attrs, $timeout, interact) {
if (!interact) {
return;
}
var snap, snapGridDimensions;
if ($attrs.snapGrid) {
snapGridDimensions = $parse($attrs.snapGrid)($scope);
snap = {
targets: [
interact.createSnapGrid(snapGridDimensions)
]
};
}
function translateElement(elm, transformValue) {
return elm
.css('-ms-transform', transformValue)
.css('-webkit-transform', transformValue)
.css('transform', transformValue);
}
interact($element[0]).draggable({
snap: snap,
onstart: function(event) {
angular.element(event.target).addClass('dragging-active');
event.target.dropData = $parse($attrs.dropData)($scope);
event.target.style.pointerEvents = 'none';
if ($attrs.onDragStart) {
$parse($attrs.onDragStart)($scope);
$scope.$apply();
}
},
onmove: function(event) {
var elm = angular.element(event.target);
var x = (parseFloat(elm.attr('data-x')) || 0) + (event.dx || 0);
var y = (parseFloat(elm.attr('data-y')) || 0) + (event.dy || 0);
switch ($parse($attrs.axis)($scope)) {
case 'x':
y = 0;
break;
case 'y':
x = 0;
break;
default:
}
if ($window.getComputedStyle(elm[0]).position === 'static') {
elm.css('position', 'relative');
}
translateElement(elm, 'translate(' + x + 'px, ' + y + 'px)')
.css('z-index', 50)
.attr('data-x', x)
.attr('data-y', y);
if ($attrs.onDrag) {
$parse($attrs.onDrag)($scope, {x: x, y: y});
$scope.$apply();
}
},
onend: function(event) {
var elm = angular.element(event.target);
var x = elm.attr('data-x');
var y = elm.attr('data-y');
event.target.style.pointerEvents = 'auto';
if ($attrs.onDragEnd) {
$parse($attrs.onDragEnd)($scope, {x: x, y: y});
$scope.$apply();
}
$timeout(function() {
translateElement(elm, '')
.css('z-index', 'auto')
.removeAttr('data-x')
.removeAttr('data-y')
.removeClass('dragging-active');
});
}
});
$scope.$watch($attrs.mwlDraggable, function(enabled) {
interact($element[0]).draggable({
enabled: enabled
});
});
$scope.$on('$destroy', function() {
interact($element[0]).unset();
});
})
.directive('mwlDraggable', function() {
return {
restrict: 'A',
controller: 'MwlDraggableCtrl'
};
});