We learned in the previous chapter that the first requirement for working with EaselJS is to create a Stage object and then append all the DisplayObject objects to it. Suppose we have a Canvas element with the ID demoCanvas. We will need the following code for the same:

var stage = new createjs.Stage("demoCanvas");

If you want to track the movement of mouse cursor events when the mouse cursor leaves the Canvas element, mouseMoveOutsideproperty should be set to true:

stage.mouseMoveOutside = true;

In the next step, a circle will be created:

var circle = new createjs.Shape(); 
circle.graphics.beginFill("red").drawCircle(0, 0, 50);

And, of course, we have to add our shape to the stage element shown as follows:

stage.addChild(circle);

Now, it's time to bind functions to the mousedown and pressmove events:

circle.on("mousedown", function (evt) {
    var offset = {
        x: evt.target.x - evt.stageX,
        y: evt.target.y - evt.stageY
    };

    circle.on("pressmove", function (ev) {
        ev.target.x = ev.stageX + offset.x;
        ev.target.y = ev.stageY + offset.y;
        stage.update();
    });
});

As you can see, we have set a callback function for the mousedown event of our display object, circle. Inside the anonymous function, there is an offset variable that has two properties, x and y. These properties collect the offset values of the mouse cursor on every mouse down within the shape (circle in this example), so we can use this offset value to change the position of the circle. In this example, x or y could be between +50 and -50.

After that, an anonymous function is added to the pressmove event of the shape.

Inside the next anonymous function for the pressmove event, we have two lines of code. Both calculate the position of the mouse cursor and then alter the coordinates of the target shape. ev.stageX and ev.stageY always give you the coordinates of the mouse cursor within the stage. Therefore, using these properties, we can change the coordinates of the target shape correctly.

Everything is ready now, but there's one last step we should perform to complete the challenge. As we learned earlier in EaselJS, we should call the update function in order to update the stage after making any changes in objects in the stage event. In the drag-and-drop example, we are changing the coordinates of the target shape continuously. Therefore, we also have to update the Stage event continuously; the question is how. The answer to this question is that we have to call stage.update() on the call for each event as follows:

stage.update();

EaselJS will update the stage event after each change to the coordinates of the circle.

The complete example

Here you can see the whole source code for creating a simple drag-and-drop interaction:

stage = new createjs.Stage("demoCanvas");
stage.mouseMoveOutside = true;

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(100, 100, 50);
stage.addChild(circle);

circle.on("mousedown", function(evt) {
    var offset = {
        x: evt.target.x - evt.stageX,
        y: evt.target.y - evt.stageY
    };

    circle.on("pressmove", function(ev) {
        ev.target.x = ev.stageX + offset.x;
        ev.target.y = ev.stageY + offset.y;
        stage.update();
    });
});

stage.update();

After running the example, you should see a red circle, as shown in the following screenshot. By clicking and dragging the circle, the coordinates of the circle will be changed.