How to Merge Objects from Two Different Layers into One Movieclip and Keep Layer Arrangement?

[ofur0]

I am using HTML5 Canvas/Createjs for this project.

Hello all, I have an graphic on a topmost layer and one on a very bottom layer. I want to somehow merge these together into a single, draggable movieclip while still keeping them on their respective layers so that the image on the bottom layer will stay behind other layers while the one on the top layer will stay in front of everything else. Is this possible? 

When I tried merging layers using the "Convert Layers to Symbol" option, it just merged everything together on the topmost layer and didn't keep the layer order.

I was trying to create two separate movieclips on the top and bottom layers and put those into a draggable container, but I'm running into some trouble with getting that to work also.

Here's what I have so far with the movieclip on the top layer being named "top" and the one on the bottom layer being named "bottom." Both movieclips are already placed on the stage on their respective layers. I'm very new to createjs, and I apologize in advance.

createjs.Ticker.on("tick", tick);

var c = new createjs.Container().set({x:200,y:200});
c.addChild(this.top);
c.addChild(this.bottom);

stage.addChild(c);

var offset = new createjs.Point();
c.on("mousedown", function(event) {
	offset.setValues(stage.mouseX-c.x, stage.mouseY-c.y);
});

c.on("pressmove", function(event) {
  c.x = stage.mouseX - offset.x; 
  c.y = stage.mouseY - offset.y;
});

function tick(event) {
    stage.update(event);
}

Any help is greatly appreciated, thank you for reading.

[ofur0]

I actually managed to resolve this by just moving the pieces relative to each other on the same layer! Please disregard this question.