Jump to top function doesn't work in kineticJs

I am trying to load multiple images to canvas using html5 img tag.
and images are replaceable .eg there are 5 image lists Images are also dragged
and the onclick of certain images replaces the last loaded image from the same list.The
problem I am having is that when I load a new item it comes on top of the others. and onclick of the bottom element i want it to move to the top and drag. I tried to use kineticjs function called move to top but nothing happens. I also checked the library and it is fine ...
I cannot insert my complete code here because it is too big.
Here is the part where I am trying to add a transition to the top functionality:

          function drawImageOnLayer(layer, img) {
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 200 ;
            var width = 200;
            var height = 400;

            var kinecticImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(img, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            kinecticImg.draggable(true);

      

        
        
        
      

    

this function does not work

        kinecticImg.on("mousedown", function(){
            this.moveToTop();
           layer.draw();

      

        
        
        
      

    

End

        });
            layer.clear();
            layer.add(kinecticImg);

            layer.draw();

        }