Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

fix(draggable): disable the cursor when dragging disabled events

Closes #307
  • Loading branch information...
Matt Lewis
Matt Lewis committed Mar 22, 2016
1 parent 7ee084b commit 834e1ee97f19321876dbfce2a76caa4c971596bb
Showing with 56 additions and 54 deletions.
  1. +50 −54 src/directives/mwlDraggable.js
  2. +6 −0 test/unit/directives/mwlDraggable.spec.js
@@ -27,10 +27,6 @@ angular
.css('transform', transformValue);
}

function canDrag() {
return $parse($attrs.mwlDraggable)($scope);
}

function getUnitsMoved(x, y, gridDimensions) {

var result = {x: x, y: y};
@@ -50,76 +46,76 @@ angular
interact($element[0]).draggable({
snap: snap,
onstart: function(event) {
if (canDrag()) {
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();
}
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) {

if (canDrag()) {
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);
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;
switch ($parse($attrs.axis)($scope)) {
case 'x':
y = 0;
break;

case 'y':
x = 0;
break;
case 'y':
x = 0;
break;

default:
}
default:
}

if ($window.getComputedStyle(elm[0]).position === 'static') {
elm.css('position', 'relative');
}
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);
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, getUnitsMoved(x, y, snapGridDimensions));
$scope.$apply();
}
if ($attrs.onDrag) {
$parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
$scope.$apply();
}

},
onend: function(event) {

if (canDrag()) {
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, getUnitsMoved(x, y, snapGridDimensions));
$scope.$apply();
}

$timeout(function() {
translateElement(elm, '')
.css('z-index', 'auto')
.removeAttr('data-x')
.removeAttr('data-y')
.removeClass('dragging-active');
});
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, getUnitsMoved(x, y, snapGridDimensions));
$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();
});
@@ -121,4 +121,10 @@ describe('mwlDraggable directive', function() {
expect(interactInstance.unset).to.have.been.called;
});

it('should disable dragging on the event', function() {
scope.draggable = false;
scope.$apply();
expect(interactInstance.draggable).to.have.been.calledWith({enabled: false});
});

});

0 comments on commit 834e1ee

Please sign in to comment.
You can’t perform that action at this time.