Corrected drag tutorial.

The old code would center the circle on the mouse on mousedown.
This new code is the same on the drag example of the site.

Author: weltonrodrigo

tutorials/Mouse Interaction/drag.html

@@ -25,11 +25,17 @@
 			dragger.x = dragger.y = 100;
 			dragger.addChild(circle, label);
 			stage.addChild(dragger);
+
+			dragger.on("mousedown", function (evt) {
+				// keep a record on the offset between the mouse position and the container
+				// position. currentTarget will be the container that the event listener was added to:
+				evt.currentTarget.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
+			});
 
 			dragger.on("pressmove",function(evt) {
-				// currentTarget will be the container that the event listener was added to:
-				evt.currentTarget.x = evt.stageX;
-				evt.currentTarget.y = evt.stageY;
+				// Calculate the new X and Y based on the mouse new position plus the offset.
+				evt.currentTarget.x = evt.stageX + evt.currentTarget.offset.x;
+				evt.currentTarget.y = evt.stageY + evt.currentTarget.offset.y;
 				// make sure to redraw the stage to show the change:
 				stage.update();   
 			});

tutorials/Mouse Interaction/index.html

@@ -221,9 +221,12 @@ <h2>Drag and drop</h2>
 				which point a <code>pressup</code> event will be dispatched.
 			</p>
 			<textarea class="brush: js;" readonly>
+circle.on("mousedown"), function(evt) {
+	evt.target.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
+}
 circle.on("pressmove", function(evt) {
-	evt.target.x = evt.stageX;
-	evt.target.y = evt.stageY;
+	evt.target.x = evt.stageX + evt.target.offset.x;
+	evt.target.y = evt.stageY + evt.target.offset.y;
 });
 circle.on("pressup", function(evt) { console.log("up"); })
 			</textarea>