I would like to create a pan function with my mouse in EaselJS. Is it possible to fill a container in such a way that I can make it draggable. Or is there another similar solution where I can move a group of children elements on my canvas? Right now, only the children elements are draggable.

This is what I have:

var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 550;
var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
stage.addChild(container);
container.addEventListener("pressmove", function (evt) {
    evt.target.set({
        x: evt.stageX,
        y: evt.stageY
    });
    stage.update();
});

I would like to create a pan function with my mouse in EaselJS. Is it possible to fill a container in such a way that I can make it draggable. Or is there another similar solution where I can move a group of children elements on my canvas? Right now, only the children elements are draggable.

This is what I have:

var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 550;
var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
stage.addChild(container);
container.addEventListener("pressmove", function (evt) {
    evt.target.set({
        x: evt.stageX,
        y: evt.stageY
    });
    stage.update();
});

• javascript
• html
• canvas
• easeljs

• 1 Have you tried using evt.currentTarget? – net.uk.sweet Commented Jan 27, 2014 at 15:55

1 Answer 1

Try creating a filled background item within your container so that the pressmove event fires wherever the user interacts with the container. Also, change the code in your event handler so that it acts on the currentTarget of the event object which, in this case, will be the container (fiddle):

var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 550;

var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
stage.addChild(container);

container.addEventListener("pressmove", function (evt) {
    console.log('press');
    evt.currentTarget.set({
        x: evt.stageX,
        y: evt.stageY
    });
    stage.update();
});

// Add a background
var bg = new createjs.Shape();
bg.graphics.beginStroke("#000");
bg.graphics.beginFill("#fff");
bg.graphics.setStrokeStyle(1);
bg.graphics.drawRect(0, 0, 400, 400);

container.addChild(bg);

// Add a thing
var square = new createjs.Shape();
square.graphics.beginFill("#000");
square.graphics.drawRect(0, 0, 50, 50);
square.x = 100;
square.y = 100;

container.addChild(square);

stage.update();