Set z-index of shapes in a Kinetic.Group

Question

How do I set z-index on the shapes that I'm adding to Kinetic.Group? My group contains rectangles and images. I want to do this:

rectangle.setZIndex(1); 
image.setZIndex(2);

This gives me the following error: Uncaught TypeError: Cannot read property 'children' of undefined.

I'm using drag and drop and then grouping the objects together. I want the images to be on top of the rectangle. the moveToTop() method gives errors when I call it inside my code.

EDIT : http://jsfiddle.net/Dcevd/ . Try this use case: drag&drop two rects, then drag the image and drop it on the first rect, then move it to the second one (when you do it inversely it works). it moves to top only on dragend.

Answer 1

Answer to your edit

You are calling moveToTop() on a child of the group, so it will only put the image on the op of that specific group. Once you place the second rectangle on the right stage, it gets a higher z-index then the first one your placed and will therefor be 'on top of' the first rectangle (including it's images). To solve this I've set the parent of the image (the group) to move to top on the dragstart, this fixes it for me:

cloneImg.on('dragstart', function(){
    this.startX=this.x();
    this.startY=this.y();
    this.getParent().moveToTop();
});

See also the fiddle: http://jsfiddle.net/Dcevd/3/

PS. If you look in the KineticJS docs, you see that setZIndex is available on Kinetic images (as with all other Shapes). http://kineticjs.com/docs/Kinetic.Image.html