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

Closes #307
mattlewis92 · Mar 22, 2016 · 834e1ee · 834e1ee
1 parent 7ee084b
commit 834e1ee
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 54 deletions.
diff --git a/src/directives/mwlDraggable.js b/src/directives/mwlDraggable.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');
-          angular.element(event.target).addClass('dragging-active');
+        event.target.dropData = $parse($attrs.dropData)($scope);
-          event.target.dropData = $parse($attrs.dropData)($scope);
+        event.target.style.pointerEvents = 'none';
-          event.target.style.pointerEvents = 'none';
+        if ($attrs.onDragStart) {
-          if ($attrs.onDragStart) {
+          $parse($attrs.onDragStart)($scope);
-            $parse($attrs.onDragStart)($scope);
+          $scope.$apply();
-            $scope.$apply();
-          }
         }
       },
       onmove: function(event) {
 
-        if (canDrag()) {
+        var elm = angular.element(event.target);
-          var elm = angular.element(event.target);
+        var x = (parseFloat(elm.attr('data-x')) || 0) + (event.dx || 0);
-          var x = (parseFloat(elm.attr('data-x')) || 0) + (event.dx || 0);
+        var y = (parseFloat(elm.attr('data-y')) || 0) + (event.dy || 0);
-          var y = (parseFloat(elm.attr('data-y')) || 0) + (event.dy || 0);
 
-          switch ($parse($attrs.axis)($scope)) {
+        switch ($parse($attrs.axis)($scope)) {
-            case 'x':
+          case 'x':
-              y = 0;
+            y = 0;
-              break;
+            break;
 
-            case 'y':
+          case 'y':
-              x = 0;
+            x = 0;
-              break;
+            break;
 
-            default:
+          default:
-          }
+        }
 
-          if ($window.getComputedStyle(elm[0]).position === 'static') {
+        if ($window.getComputedStyle(elm[0]).position === 'static') {
-            elm.css('position', 'relative');
+          elm.css('position', 'relative');
-          }
+        }
 
-          translateElement(elm, 'translate(' + x + 'px, ' + y + 'px)')
+        translateElement(elm, 'translate(' + x + 'px, ' + y + 'px)')
-            .css('z-index', 50)
+          .css('z-index', 50)
-            .attr('data-x', x)
+          .attr('data-x', x)
-            .attr('data-y', y);
+          .attr('data-y', y);
 
-          if ($attrs.onDrag) {
+        if ($attrs.onDrag) {
-            $parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
+          $parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
-            $scope.$apply();
+          $scope.$apply();
-          }
         }
 
       },
       onend: function(event) {
 
-        if (canDrag()) {
+        var elm = angular.element(event.target);
-          var elm = angular.element(event.target);
+        var x = elm.attr('data-x');
-          var x = elm.attr('data-x');
+        var y = elm.attr('data-y');
-          var y = elm.attr('data-y');
+
-
+        event.target.style.pointerEvents = 'auto';
-          event.target.style.pointerEvents = 'auto';
+        if ($attrs.onDragEnd) {
-          if ($attrs.onDragEnd) {
+          $parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions));
-            $parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions));
+          $scope.$apply();
-            $scope.$apply();
-          }
-
-          $timeout(function() {
-            translateElement(elm, '')
-              .css('z-index', 'auto')
-              .removeAttr('data-x')
-              .removeAttr('data-y')
-              .removeClass('dragging-active');
-          });
         }
 
+        $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();
     });

diff --git a/test/unit/directives/mwlDraggable.spec.js b/test/unit/directives/mwlDraggable.spec.js
@@ -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});
+  });
+
 });