kinetic js textPath: draggable didn't work

Question

var stages = new Array() ;
   var limites = new Array() ;
   numStage=0;
   r = {
   'x':65,
   'y':120,
   'xwidth':335,
   'yheight':210
   };
   limites.push(r);
   
   stages[numStage] = new Kinetic.Stage({
    container: 'cmg_canvas_'+numStage,
    width: 450,
    height: 450
   });
   //creation image
   obj = new Image();
   obj.src = 'http://i.imgur.com/zFZgKuS.jpg';
   image = new Kinetic.Image({
    image: obj,
    width: 450,
    height: 450
   });
   // add image to calque
   layer = new Kinetic.Layer();
   layer.add(image);
   stages[numStage].add(layer); //add image to canvas
      
   layer = new Kinetic.Layer();
   //set limit x y h l
   /*var rect = new Kinetic.Rect({
    name: 'limite',
    x: limites[numStage].x,
    y: limites[numStage].y,
    width: limites[numStage].xwidth,
    height: limites[numStage].yheight,
    stroke: 'black',
    strokeWidth: 0.5
   });*/
   //layer.add(rect);// add to canvas
   stages[numStage].add(layer);
   
   $('.cmg_text').live('blur', function(){
    
    idText = 'cmg_line0'; 
    
    numStage = 0;
    
    drawTextPath(numStage, idText,$(this).val(),50,22,numStage);
    //text = getText(this).text;
      
   });
   
   
   function getSVG(x,y,w,verif) {
     halfw = parseFloat((w/2).toFixed(2));
     x1 = parseFloat((halfw/2).toFixed(2));
     x2 = parseFloat(halfw + x1);
     
     if(parseInt(verif))
     {
      y1 = parseFloat(y) * 2 +18;
      y2 = parseFloat(y) * 2 +18;
     }
     else
     {
      y1 = -18;
      y2 = -18; 
     }
     
     str = 'M '+x+','+y+' C '+x1+','+y1+' '+x2+','+y2+' '+w+','+y;
     return str;
    }
   
   function drawTextPath(numStage, textId,text,valueSlider, newFontSize,numStage){
     //'M 0,115 C42,-18 126,-18 165,115';
     //'M 0,115 C45,230 180,230 180,115';
     var arcOnly = 0;
     if(textId == 'cmg_line0')
     {
       console.log('limites[numStage].yheight/2'+limites[numStage].yheight/2);
       console.log('limites[numStage].xwidth'+limites[numStage].xwidth);
      svg  = getSVG(0,valueSlider,valueSlider*6.3,0);
      arcOnly = 0;
     }
    //alert(svg);
     console.log(parseFloat(limites[numStage].y)); 
     console.log(parseFloat(arcOnly)); 
     console.log(parseFloat(limites[numStage].y - arcOnly)); 
      
     var layer = new Kinetic.Layer({name:'textPathLayer',draggable:true});
     var textpath = new Kinetic.TextPath({
      name:'TextPath',
      id: textId,
      //x: 0,
      //x: limites[numStage].x + limites[numStage].xwidth/2,
      //y: 0,
      //y: limites[numStage].y + limites[numStage].yheight/2,
      x: limites[numStage].x ,
      y: limites[numStage].y + limites[numStage].yheight/2,
      fill: '#000',
      fontSize: newFontSize,
      fontFamily: 'Arial',
      text: text,
      //offsetX:0,
      //offsetY:0,
      draggable: true,
      dragBoundFunc: function(pos){
       p = textParams(this, pos);
       return {x: p.newX, y: p.newY};
       },
       
      data: svg
     });
      
      //
     layer.add(textpath);
       
     stages[numStage].add(layer);
      //layer.moveToTop();
     //layer.draw();
      //stages[0].draw();
    }

<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.6.0/kinetic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cmg_canvas_0"></div>
   <input type='text' class='cmg_text' />

I have to draw a draggable textpath with kineticjs, with text given by an input text, the action is triggered in blur. I have a stage that contain 3 layers; Layer for the background, and one layer for the textpath. My problem that the draggable in the textpath is not working, i tried to set the text layer in the top, but i didn't get it draggable.

This is my jsfiddle I have a doubt of inner layer problem. Thanks in advance.