continued refactoring and decoupling drag and drop logic. The code base now looks fully decoupled as far as I can tell - next step is to test configurator combinations

dist/kinetic-DragAndDrop-current.min.js

@@ -1 +1 @@
-Kinetic.Global.dragAnim=new Kinetic.Animation,Kinetic.Global._endDrag=function(a){var b=Kinetic.Global,c=b.drag.node;c&&(c.nodeType==="Stage"?c.draw():c.getLayer().draw(),b.drag.moving&&(b.drag.moving=!1,c._handleEvent("dragend",a))),b.drag.node=null,b.dragAnim.stop()},Kinetic.Global._startDrag=function(a){var b=Kinetic.Global,c=b.drag.node;if(c){var d=c.getStage().getUserPosition(),e=c.attrs.dragBoundFunc,f={x:d.x-b.drag.offset.x,y:d.y-b.drag.offset.y};e!==undefined&&(f=e.call(c,f,a)),c.setAbsolutePosition(f),b.drag.moving||(b.drag.moving=!0,b.drag.node._handleEvent("dragstart",a)),b.drag.node._handleEvent("dragmove",a)}},Kinetic.Node.prototype.setDraggable=function(a){this.setAttr("draggable",a),this._dragChange()},Kinetic.Node.prototype.getDraggable=function(){return this.attrs.draggable},Kinetic.Node.prototype.isDragging=function(){var a=Kinetic.Global;return a.drag.node&&a.drag.node._id===this._id&&a.drag.moving},Kinetic.Node.prototype._listenDrag=function(){this._dragCleanup();var a=Kinetic.Global,b=this;this.on("mousedown.kinetic touchstart.kinetic",function(a){b._initDrag()})},Kinetic.Node.prototype._initDrag=function(){var a=Kinetic.Global,b=this.getStage(),c=b.getUserPosition();if(c){var d=this.getTransform().getTranslation(),e=this.getAbsoluteTransform().getTranslation(),f=this.getAbsolutePosition();a.drag.node=this,a.drag.offset.x=c.x-f.x,a.drag.offset.y=c.y-f.y,this.nodeType==="Stage"?a.dragAnim.node=this:a.dragAnim.node=this.getLayer(),a.dragAnim.start()}},Kinetic.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.Global;a&&b.drag.node&&b.drag.node._id===this._id&&a._endDrag()}},Kinetic.Node.prototype._dragCleanup=function(){this.off("mousedown.kinetic"),this.off("touchstart.kinetic")},Kinetic.Node.prototype.isDraggable=Kinetic.Node.prototype.getDraggable,Kinetic.Node.addGettersSetters(Kinetic.Node,["dragBoundFunc"]);
+Kinetic.DD={anim:new Kinetic.Animation,moving:!1,offset:{x:0,y:0}},Kinetic.DD._startDrag=function(a){var b=Kinetic.DD,c=b.node;if(c){var d=c.getStage().getUserPosition(),e=c.attrs.dragBoundFunc,f={x:d.x-b.offset.x,y:d.y-b.offset.y};e!==undefined&&(f=e.call(c,f,a)),c.setAbsolutePosition(f),b.moving||(b.moving=!0,b.node._handleEvent("dragstart",a)),b.node._handleEvent("dragmove",a)}},Kinetic.DD._endDrag=function(a){var b=Kinetic.DD,c=b.node;c&&(c.nodeType==="Stage"?c.draw():c.getLayer().draw(),b.moving&&(b.moving=!1,c._handleEvent("dragend",a))),b.node=null,b.anim.stop()},Kinetic.Node.prototype.setDraggable=function(a){this.setAttr("draggable",a),this._dragChange()},Kinetic.Node.prototype.getDraggable=function(){return this.attrs.draggable},Kinetic.Node.prototype.isDragging=function(){var a=Kinetic.DD;return a.node&&a.node._id===this._id&&a.moving},Kinetic.Node.prototype._listenDrag=function(){this._dragCleanup();var a=this;this.on("mousedown.kinetic touchstart.kinetic",function(b){a._initDrag()})},Kinetic.Node.prototype._initDrag=function(){var a=Kinetic.DD,b=this.getStage(),c=b.getUserPosition();if(c){var d=this.getTransform().getTranslation(),e=this.getAbsoluteTransform().getTranslation(),f=this.getAbsolutePosition();a.node=this,a.offset.x=c.x-f.x,a.offset.y=c.y-f.y,this.nodeType==="Stage"?a.anim.node=this:a.anim.node=this.getLayer(),a.anim.start()}},Kinetic.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.DD;a&&b.node&&b.node._id===this._id&&b._endDrag()}},Kinetic.Node.prototype._dragCleanup=function(){this.off("mousedown.kinetic"),this.off("touchstart.kinetic")},Kinetic.Node.prototype.isDraggable=Kinetic.Node.prototype.getDraggable,Kinetic.Node.addGettersSetters(Kinetic.Node,["dragBoundFunc"]);

dist/kinetic-Global-current.min.js

@@ -1 +1 @@
-var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","mouseenter","mouseleave","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},drag:{moving:!1,offset:{x:0,y:0},lastDrawTime:0},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};
+var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","mouseenter","mouseleave","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};

dist/kinetic-current.js

@@ -42,14 +42,6 @@ Kinetic.Global = {
     tempNodes: {},
     //shapes hash.  rgb keys and shape values
     shapes: {},
-    drag: {
-        moving: false,
-        offset: {
-            x: 0,
-            y: 0
-        },
-        lastDrawTime: 0
-    },
     warn: function(str) {
         if(console && console.warn) {
             console.warn('Kinetic warning: ' + str);
@@ -2247,11 +2239,47 @@ Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
  * @name getVisible
  * @methodOf Kinetic.Node.prototype
  */
-Kinetic.Global.dragAnim = new Kinetic.Animation();
+Kinetic.DD = {
+    anim: new Kinetic.Animation(),
+    moving: false,
+    offset: {
+        x: 0,
+        y: 0
+    }
+};
 
-Kinetic.Global._endDrag = function(evt) {
-    var go = Kinetic.Global;
-    var node = go.drag.node;
+Kinetic.DD._startDrag = function(evt) {
+    var dd = Kinetic.DD;
+    var node = dd.node;
+
+    if(node) {
+        var pos = node.getStage().getUserPosition();
+        var dbf = node.attrs.dragBoundFunc;
+
+        var newNodePos = {
+            x: pos.x - dd.offset.x,
+            y: pos.y - dd.offset.y
+        };
+
+        if(dbf !== undefined) {
+            newNodePos = dbf.call(node, newNodePos, evt);
+        }
+
+        node.setAbsolutePosition(newNodePos);
+
+        if(!dd.moving) {
+            dd.moving = true;
+            // execute dragstart events if defined
+            dd.node._handleEvent('dragstart', evt);
+        }
+
+        // execute user defined ondragmove if defined
+        dd.node._handleEvent('dragmove', evt);
+    }
+};
+Kinetic.DD._endDrag = function(evt) {
+    var dd = Kinetic.DD;
+    var node = dd.node;
     if(node) {
         if(node.nodeType === 'Stage') {
             node.draw();
@@ -2261,43 +2289,13 @@ Kinetic.Global._endDrag = function(evt) {
         }
 
         // handle dragend
-        if(go.drag.moving) {
-            go.drag.moving = false;
+        if(dd.moving) {
+            dd.moving = false;
             node._handleEvent('dragend', evt);
         }
     }
-    go.drag.node = null;
-    go.dragAnim.stop();
-};
-
-Kinetic.Global._startDrag = function(evt) {
-    var go = Kinetic.Global;
-    var node = go.drag.node;
-
-    if(node) {
-        var pos = node.getStage().getUserPosition();
-        var dbf = node.attrs.dragBoundFunc;
-
-        var newNodePos = {
-            x: pos.x - go.drag.offset.x,
-            y: pos.y - go.drag.offset.y
-        };
-
-        if(dbf !== undefined) {
-            newNodePos = dbf.call(node, newNodePos, evt);
-        }
-
-        node.setAbsolutePosition(newNodePos);
-
-        if(!go.drag.moving) {
-            go.drag.moving = true;
-            // execute dragstart events if defined
-            go.drag.node._handleEvent('dragstart', evt);
-        }
-
-        // execute user defined ondragmove if defined
-        go.drag.node._handleEvent('dragmove', evt);
-    }
+    dd.node = null;
+    dd.anim.stop();
 };
 /**
  * set draggable
@@ -2323,20 +2321,19 @@ Kinetic.Node.prototype.getDraggable = function() {
  * @methodOf Kinetic.Node.prototype
  */
 Kinetic.Node.prototype.isDragging = function() {
-    var go = Kinetic.Global;
-    return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
+    var dd = Kinetic.DD;
+    return dd.node && dd.node._id === this._id && dd.moving;
 };
 
 Kinetic.Node.prototype._listenDrag = function() {
     this._dragCleanup();
-    var go = Kinetic.Global;
     var that = this;
     this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
         that._initDrag();
     });
 };
 Kinetic.Node.prototype._initDrag = function() {
-    var go = Kinetic.Global;
+    var dd = Kinetic.DD;
     var stage = this.getStage();
     var pos = stage.getUserPosition();
 
@@ -2344,21 +2341,21 @@ Kinetic.Node.prototype._initDrag = function() {
         var m = this.getTransform().getTranslation();
         var am = this.getAbsoluteTransform().getTranslation();
         var ap = this.getAbsolutePosition();
-        go.drag.node = this;
-        go.drag.offset.x = pos.x - ap.x;
-        go.drag.offset.y = pos.y - ap.y;
+        dd.node = this;
+        dd.offset.x = pos.x - ap.x;
+        dd.offset.y = pos.y - ap.y;
 
         /*
          * if dragging and dropping the stage,
          * draw all of the layers
          */
         if(this.nodeType === 'Stage') {
-            go.dragAnim.node = this;
+            dd.anim.node = this;
         }
         else {
-            go.dragAnim.node = this.getLayer();
+            dd.anim.node = this.getLayer();
         }
-        go.dragAnim.start();
+        dd.anim.start();
     }
 };
 Kinetic.Node.prototype._dragChange = function() {
@@ -2375,9 +2372,9 @@ Kinetic.Node.prototype._dragChange = function() {
          * drag and drop mode
          */
         var stage = this.getStage();
-        var go = Kinetic.Global;
-        if(stage && go.drag.node && go.drag.node._id === this._id) {
-            stage._endDrag();
+        var dd = Kinetic.DD;
+        if(stage && dd.node && dd.node._id === this._id) {
+            dd._endDrag();
         }
     }
 };
@@ -3138,10 +3135,10 @@ Kinetic.Stage.prototype = {
     },
     _mouseout: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         // if there's a current target shape, run mouseout handlers
         var targetShape = this.targetShape;
-        if(targetShape && !go.drag.moving) {
+        if(targetShape && (!dd || !dd.moving)) {
             targetShape._handleEvent('mouseout', evt);
             targetShape._handleEvent('mouseleave', evt);
             this.targetShape = null;
@@ -3149,17 +3146,19 @@ Kinetic.Stage.prototype = {
         this.mousePos = undefined;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _mousemove: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
 
         if(obj) {
             var shape = obj.shape;
             if(shape) {
-                if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
+                if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
                     if(this.targetShape) {
                         this.targetShape._handleEvent('mouseout', evt, shape);
                         this.targetShape._handleEvent('mouseleave', evt, shape);
@@ -3177,14 +3176,16 @@ Kinetic.Stage.prototype = {
          * if no shape was detected, clear target shape and try
          * to run mouseout from previous target shape
          */
-        else if(this.targetShape && !go.drag.moving) {
+        else if(this.targetShape && (!dd || !dd.moving)) {
             this.targetShape._handleEvent('mouseout', evt);
             this.targetShape._handleEvent('mouseleave', evt);
             this.targetShape = null;
         }
 
         // start drag and drop
-        go._startDrag(evt);
+        if(dd) {
+            dd._startDrag(evt);
+        }
     },
     _mousedown: function(evt) {
         this._setUserPosition(evt);
@@ -3196,13 +3197,13 @@ Kinetic.Stage.prototype = {
         }
 
         //init stage drag and drop
-        if(this.attrs.draggable) {
+        if(Kinetic.DD && this.attrs.draggable) {
             this._initDrag();
         }
     },
     _mouseup: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
         var that = this;
         if(obj && obj.shape) {
@@ -3215,7 +3216,7 @@ Kinetic.Stage.prototype = {
                  * if dragging and dropping, don't fire click or dbl click
                  * event
                  */
-                if((!go.drag.moving) || !go.drag.node) {
+                if(!dd || !dd.moving || !dd.node) {
                     shape._handleEvent('click', evt);
 
                     if(this.inDoubleClickWindow) {
@@ -3231,7 +3232,9 @@ Kinetic.Stage.prototype = {
         this.clickStart = false;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _touchstart: function(evt) {
         this._setUserPosition(evt);
@@ -3247,13 +3250,13 @@ Kinetic.Stage.prototype = {
         /*
          * init stage drag and drop
          */
-        if(this.attrs.draggable) {
+        if(Kinetic.DD && this.attrs.draggable) {
             this._initDrag();
         }
     },
     _touchend: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
         var that = this;
         if(obj && obj.shape) {
@@ -3266,7 +3269,7 @@ Kinetic.Stage.prototype = {
                  * if dragging and dropping, don't fire tap or dbltap
                  * event
                  */
-                if((!go.drag.moving) || !go.drag.node) {
+                if(!dd || !dd.moving || !dd.node) {
                     shape._handleEvent('tap', evt);
 
                     if(this.inDoubleClickWindow) {
@@ -3283,11 +3286,13 @@ Kinetic.Stage.prototype = {
         this.tapStart = false;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _touchmove: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         evt.preventDefault();
         var obj = this.getIntersection(this.getUserPosition());
         if(obj && obj.shape) {
@@ -3296,7 +3301,9 @@ Kinetic.Stage.prototype = {
         }
 
         // start drag and drop
-        go._startDrag(evt);
+        if(dd) {
+            dd._startDrag(evt);
+        }
     },
     /**
      * set mouse positon for desktop apps

src/DragAndDrop.js

@@ -1,8 +1,44 @@
-Kinetic.Global.dragAnim = new Kinetic.Animation();
+Kinetic.DD = {
+    anim: new Kinetic.Animation(),
+    moving: false,
+    offset: {
+        x: 0,
+        y: 0
+    }
+};
 
-Kinetic.Global._endDrag = function(evt) {
-    var go = Kinetic.Global;
-    var node = go.drag.node;
+Kinetic.DD._startDrag = function(evt) {
+    var dd = Kinetic.DD;
+    var node = dd.node;
+
+    if(node) {
+        var pos = node.getStage().getUserPosition();
+        var dbf = node.attrs.dragBoundFunc;
+
+        var newNodePos = {
+            x: pos.x - dd.offset.x,
+            y: pos.y - dd.offset.y
+        };
+
+        if(dbf !== undefined) {
+            newNodePos = dbf.call(node, newNodePos, evt);
+        }
+
+        node.setAbsolutePosition(newNodePos);
+
+        if(!dd.moving) {
+            dd.moving = true;
+            // execute dragstart events if defined
+            dd.node._handleEvent('dragstart', evt);
+        }
+
+        // execute user defined ondragmove if defined
+        dd.node._handleEvent('dragmove', evt);
+    }
+};
+Kinetic.DD._endDrag = function(evt) {
+    var dd = Kinetic.DD;
+    var node = dd.node;
     if(node) {
         if(node.nodeType === 'Stage') {
             node.draw();
@@ -12,43 +48,13 @@ Kinetic.Global._endDrag = function(evt) {
         }
 
         // handle dragend
-        if(go.drag.moving) {
-            go.drag.moving = false;
+        if(dd.moving) {
+            dd.moving = false;
             node._handleEvent('dragend', evt);
         }
     }
-    go.drag.node = null;
-    go.dragAnim.stop();
-};
-
-Kinetic.Global._startDrag = function(evt) {
-    var go = Kinetic.Global;
-    var node = go.drag.node;
-
-    if(node) {
-        var pos = node.getStage().getUserPosition();
-        var dbf = node.attrs.dragBoundFunc;
-
-        var newNodePos = {
-            x: pos.x - go.drag.offset.x,
-            y: pos.y - go.drag.offset.y
-        };
-
-        if(dbf !== undefined) {
-            newNodePos = dbf.call(node, newNodePos, evt);
-        }
-
-        node.setAbsolutePosition(newNodePos);
-
-        if(!go.drag.moving) {
-            go.drag.moving = true;
-            // execute dragstart events if defined
-            go.drag.node._handleEvent('dragstart', evt);
-        }
-
-        // execute user defined ondragmove if defined
-        go.drag.node._handleEvent('dragmove', evt);
-    }
+    dd.node = null;
+    dd.anim.stop();
 };
 /**
  * set draggable
@@ -74,20 +80,19 @@ Kinetic.Node.prototype.getDraggable = function() {
  * @methodOf Kinetic.Node.prototype
  */
 Kinetic.Node.prototype.isDragging = function() {
-    var go = Kinetic.Global;
-    return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
+    var dd = Kinetic.DD;
+    return dd.node && dd.node._id === this._id && dd.moving;
 };
 
 Kinetic.Node.prototype._listenDrag = function() {
     this._dragCleanup();
-    var go = Kinetic.Global;
     var that = this;
     this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
         that._initDrag();
     });
 };
 Kinetic.Node.prototype._initDrag = function() {
-    var go = Kinetic.Global;
+    var dd = Kinetic.DD;
     var stage = this.getStage();
     var pos = stage.getUserPosition();
 
@@ -95,21 +100,21 @@ Kinetic.Node.prototype._initDrag = function() {
         var m = this.getTransform().getTranslation();
         var am = this.getAbsoluteTransform().getTranslation();
         var ap = this.getAbsolutePosition();
-        go.drag.node = this;
-        go.drag.offset.x = pos.x - ap.x;
-        go.drag.offset.y = pos.y - ap.y;
+        dd.node = this;
+        dd.offset.x = pos.x - ap.x;
+        dd.offset.y = pos.y - ap.y;
 
         /*
          * if dragging and dropping the stage,
          * draw all of the layers
          */
         if(this.nodeType === 'Stage') {
-            go.dragAnim.node = this;
+            dd.anim.node = this;
         }
         else {
-            go.dragAnim.node = this.getLayer();
+            dd.anim.node = this.getLayer();
         }
-        go.dragAnim.start();
+        dd.anim.start();
     }
 };
 Kinetic.Node.prototype._dragChange = function() {
@@ -126,9 +131,9 @@ Kinetic.Node.prototype._dragChange = function() {
          * drag and drop mode
          */
         var stage = this.getStage();
-        var go = Kinetic.Global;
-        if(stage && go.drag.node && go.drag.node._id === this._id) {
-            stage._endDrag();
+        var dd = Kinetic.DD;
+        if(stage && dd.node && dd.node._id === this._id) {
+            dd._endDrag();
         }
     }
 };

src/Global.js

@@ -42,14 +42,6 @@ Kinetic.Global = {
     tempNodes: {},
     //shapes hash.  rgb keys and shape values
     shapes: {},
-    drag: {
-        moving: false,
-        offset: {
-            x: 0,
-            y: 0
-        },
-        lastDrawTime: 0
-    },
     warn: function(str) {
         if(console && console.warn) {
             console.warn('Kinetic warning: ' + str);

src/Stage.js

@@ -340,10 +340,10 @@ Kinetic.Stage.prototype = {
     },
     _mouseout: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         // if there's a current target shape, run mouseout handlers
         var targetShape = this.targetShape;
-        if(targetShape && !go.drag.moving) {
+        if(targetShape && (!dd || !dd.moving)) {
             targetShape._handleEvent('mouseout', evt);
             targetShape._handleEvent('mouseleave', evt);
             this.targetShape = null;
@@ -351,17 +351,19 @@ Kinetic.Stage.prototype = {
         this.mousePos = undefined;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _mousemove: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
 
         if(obj) {
             var shape = obj.shape;
             if(shape) {
-                if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
+                if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
                     if(this.targetShape) {
                         this.targetShape._handleEvent('mouseout', evt, shape);
                         this.targetShape._handleEvent('mouseleave', evt, shape);
@@ -379,14 +381,16 @@ Kinetic.Stage.prototype = {
          * if no shape was detected, clear target shape and try
          * to run mouseout from previous target shape
          */
-        else if(this.targetShape && !go.drag.moving) {
+        else if(this.targetShape && (!dd || !dd.moving)) {
             this.targetShape._handleEvent('mouseout', evt);
             this.targetShape._handleEvent('mouseleave', evt);
             this.targetShape = null;
         }
 
         // start drag and drop
-        go._startDrag(evt);
+        if(dd) {
+            dd._startDrag(evt);
+        }
     },
     _mousedown: function(evt) {
         this._setUserPosition(evt);
@@ -398,13 +402,13 @@ Kinetic.Stage.prototype = {
         }
 
         //init stage drag and drop
-        if(this.attrs.draggable) {
+        if(Kinetic.DD && this.attrs.draggable) {
             this._initDrag();
         }
     },
     _mouseup: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
         var that = this;
         if(obj && obj.shape) {
@@ -417,7 +421,7 @@ Kinetic.Stage.prototype = {
                  * if dragging and dropping, don't fire click or dbl click
                  * event
                  */
-                if((!go.drag.moving) || !go.drag.node) {
+                if(!dd || !dd.moving || !dd.node) {
                     shape._handleEvent('click', evt);
 
                     if(this.inDoubleClickWindow) {
@@ -433,7 +437,9 @@ Kinetic.Stage.prototype = {
         this.clickStart = false;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _touchstart: function(evt) {
         this._setUserPosition(evt);
@@ -449,13 +455,13 @@ Kinetic.Stage.prototype = {
         /*
          * init stage drag and drop
          */
-        if(this.attrs.draggable) {
+        if(Kinetic.DD && this.attrs.draggable) {
             this._initDrag();
         }
     },
     _touchend: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         var obj = this.getIntersection(this.getUserPosition());
         var that = this;
         if(obj && obj.shape) {
@@ -468,7 +474,7 @@ Kinetic.Stage.prototype = {
                  * if dragging and dropping, don't fire tap or dbltap
                  * event
                  */
-                if((!go.drag.moving) || !go.drag.node) {
+                if(!dd || !dd.moving || !dd.node) {
                     shape._handleEvent('tap', evt);
 
                     if(this.inDoubleClickWindow) {
@@ -485,11 +491,13 @@ Kinetic.Stage.prototype = {
         this.tapStart = false;
 
         // end drag and drop
-        go._endDrag(evt);
+        if(dd) {
+            dd._endDrag(evt);
+        }
     },
     _touchmove: function(evt) {
         this._setUserPosition(evt);
-        var go = Kinetic.Global;
+        var dd = Kinetic.DD;
         evt.preventDefault();
         var obj = this.getIntersection(this.getUserPosition());
         if(obj && obj.shape) {
@@ -498,7 +506,9 @@ Kinetic.Stage.prototype = {
         }
 
         // start drag and drop
-        go._startDrag(evt);
+        if(dd) {
+            dd._startDrag(evt);
+        }
     },
     /**
      * set mouse positon for desktop apps