Dragging a container in EaselJS

canvas, easeljs, html, javascript

Solution

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();

Problem

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(); }); ```

Original source