drag and drop now ends whenever a mouseup or touchend event is detected anywhere on the page

src/DragAndDrop.js

@@ -1,6 +1,4 @@
 (function() {
-    var dd, html = document.getElementsByTagName('html')[0];
-
     Kinetic.DD = {
         anim: new Kinetic.Animation(),
         moving: false,
@@ -10,12 +8,8 @@
         }
     };
 
-    dd = Kinetic.DD;
-
-    //html.addEventListener('mousedown', _htmlMouseup);
-
     Kinetic.getNodeDragging = function() {
-        return dd.node;
+        return Kinetic.DD.node;
     };
 
     Kinetic.DD._setupDragLayerAndGetContainer = function(no) {
@@ -51,7 +45,7 @@
         stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
     };
     Kinetic.DD._drag = function(evt) {
-        var node = dd.node;
+        var dd = Kinetic.DD, node = dd.node;
 
         if(node) {
             var pos = node.getStage().getUserPosition();
@@ -81,9 +75,10 @@
         }
     };
     Kinetic.DD._endDrag = function(evt) {
-        var node = dd.node, nodeType, stage;
+        var dd = Kinetic.DD, node = dd.node;
 
-        if(node) { nodeType = node.nodeType, stage = node.getStage();
+        if(node) {
+            var nodeType = node.nodeType, stage = node.getStage();
             node.setListening(true);
             if(nodeType === 'Stage') {
                 node.draw();
@@ -110,7 +105,7 @@
         dd.anim.stop();
     };
     Kinetic.Node.prototype._startDrag = function(evt) {
-        var that = this, stage = this.getStage(), pos = stage.getUserPosition();
+        var dd = Kinetic.DD, that = this, stage = this.getStage(), pos = stage.getUserPosition();
 
         if(pos) {
             var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
@@ -175,6 +170,7 @@
      * @methodOf Kinetic.Node.prototype
      */
     Kinetic.Node.prototype.isDragging = function() {
+        var dd = Kinetic.DD;
         return dd.node && dd.node._id === this._id && dd.moving;
     };
 
@@ -249,4 +245,8 @@
      * @name getDragOnTop
      * @methodOf Kinetic.Node.prototype
      */
+
+    var html = document.getElementsByTagName('html')[0];
+    html.addEventListener('mouseup', Kinetic.DD._endDrag);
+    html.addEventListener('touchend', Kinetic.DD._endDrag);
 })();

src/Stage.js

@@ -395,11 +395,6 @@
             this._setUserPosition(evt);
             var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition());
 
-            // end drag and drop
-            if(dd) {
-                dd._endDrag(evt);
-            }
-
             if(obj && obj.shape) {
                 var shape = obj.shape;
                 shape._handleEvent('mouseup', evt);
@@ -447,11 +442,6 @@
             this._setUserPosition(evt);
             var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition());
 
-            // end drag and drop
-            if(dd) {
-                dd._endDrag(evt);
-            }
-
             if(obj && obj.shape) {
                 var shape = obj.shape;
                 shape._handleEvent('touchend', evt);

tests/js/functionalTests.js

@@ -1,5 +1,5 @@
 Test.Modules.DD = {
-	  'remove shape with onclick': function(containerId) {
+    'remove shape with onclick': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -24,9 +24,14 @@ Test.Modules.DD = {
         layer.add(circle);
         stage.add(layer);
         
+        function remove() {
+        	circle.remove();
+            layer.draw();
+            warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick');
+        }
+
         circle.on('click', function() {
-        	this.remove();
+            setTimeout(remove, 0);
-        	layer.draw();
         });
 
         stage._mousedown({
@@ -37,9 +42,9 @@ Test.Modules.DD = {
             clientX: 291,
             clientY: 112 + top
         });
-        
+        // end drag is tied to document mouseup and touchend event
-        warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick');
+        // which can't be simulated.  call _endDrag manually
-
+        Kinetic.DD._endDrag();
     },
     'test dragstart, dragmove, dragend': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -109,6 +114,9 @@ Test.Modules.DD = {
             clientX: 100,
             clientY: 98 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(dragStart, 'dragstart event was not triggered');
         test(dragMove, 'dragmove event was not triggered');
@@ -177,6 +185,9 @@ Test.Modules.DD = {
             clientX: 100,
             clientY: 100 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(circle.getPosition().x === 380, 'circle x should be 380');
         test(circle.getPosition().y === 100, 'circle y should be 100');
@@ -243,6 +254,10 @@ Test.Modules.DD = {
             clientX: 210,
             clientY: 109 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
+
         //console.log(layer.toDataURL())
         warn(layer.toDataURL() === dataUrls['drag layer after'], 'end data url is incorrect');
 
@@ -458,6 +473,9 @@ Test.Modules.EVENT = {
             clientX: 290,
             clientY: 100 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(mouseover, '4) mouseover should be true');
         test(mousemove, '4) mousemove should be true');
@@ -486,6 +504,9 @@ Test.Modules.EVENT = {
             clientX: 290,
             clientY: 100 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(mouseover, '6) mouseover should be true');
         test(mousemove, '6) mousemove should be true');
@@ -540,6 +561,9 @@ Test.Modules.EVENT = {
             preventDefault: function() {
             }
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(touchstart, '9) touchstart should be true');
         test(!touchmove, '9) touchmove should be false');
@@ -568,6 +592,9 @@ Test.Modules.EVENT = {
             preventDefault: function() {
             }
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(touchstart, '11) touchstart should be true');
         test(!touchmove, '11) touchmove should be false');
@@ -892,6 +919,9 @@ Test.Modules.EVENT = {
             clientX: 374,
             clientY: 114 + top
         });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        Kinetic.DD._endDrag();
 
         test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling');
     }