zoom kineticjs-content, drag position not correct

[tranquangchau]

<style>
.kineticjs-content{border: 1px solid;}
</style>
  
  <div id="container" style="float: left;"></div>
  <br> <button onclick="add_text()">add text</button>
  <br> <button onclick="zoom()">zoom</button>
  <br> <button onclick="nonzoom()">no -zoom</button>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/kinetic-v5.1.0.js"></script>

<script>
var gl_width=478;
  var gl_height=726;
var iszoom=false;
var zoom_xmax=0.62*478;
var zoom_ymax=0.62*726;
  
var stage = new Kinetic.Stage({
        container: 'container',
        width:gl_width,
        height:gl_height
  });

var layer = new Kinetic.Layer();

stage.add(layer);
var getCurrentRandomText='id12314';
function add_text(){
		minTextX = 0;
        maxTextX = 100;
        minTextY = 0;
        maxTextY = 200;
		
        var textGroup = new Kinetic.Group({
            x:100,
            y:200,			
            draggable: true,
            dragBoundFunc: function (pos) {
				console.log(pos);
                var X = pos.x;
                var Y = pos.y;
                /*
				if (X < minTextX) {
                    X = minTextX;
                }
                if (X > maxTextX) {
                    X = maxTextX;
                }
                if (Y < minTextY) {
                    Y = minTextY;
                }
                if (Y > maxTextY) {
                    Y = maxTextY;
                }
				*/
				console.log("set:x= "+X+" set:y="+Y);
                return ({
                    x: X,
                    y: Y
                });
				
            }
        });
        var newText = new Kinetic.Text({
            text:   'chauchau',
            fontSize: 16,
            fill: '#666666',
            fontFamily: 'Arial',
            name:   'customText_' + getCurrentRandomText,
            id:     'customText_' + getCurrentRandomText
        });
        
        var textRect = new Kinetic.Rect({
            width: newText.getWidth(),
            height: newText.getHeight(),
            name:   'customRec_' + getCurrentRandomText,
            id:     'customRec_' + getCurrentRandomText
        });
        textGroup.add(textRect).add(newText);
  
        layer.add(textGroup);
        layer.draw();
		
		
        
        textGroup.on('mouseover', function() 
        {
            document.body.style.cursor = 'pointer';
        });
        textGroup.on('mouseout', function() 
        {
            document.body.style.cursor = 'default';
        });
        textGroup.on('dragstart', function()
        {                			
			if(iszoom){
				maxTextX = zoom_xmax;				
				maxTextY = zoom_ymax;
			}else{
				maxTextX = gl_width;				
				maxTextY = gl_height;
			}
        			
			var getTextobj='';
			var getRectObj='';  
			getTextobj =layer.get('.customText_' + getCurrentRandomText);
			getRectObj =layer.get('.customRec_' + getCurrentRandomText);
			
			getTextobj[0].setStroke(1);
			layer.draw();
        });
		textGroup.on('dragend', function() 
        {
			var getTextobj='';
			var getRectObj='';  
			getTextobj =layer.get('.customText_' + getCurrentRandomText);
			getRectObj =layer.get('.customRec_' + getCurrentRandomText);
			
			getTextobj[0].setStroke(0);
			layer.draw();
        });
}
function zoom(){
	iszoom=true;
	$('.kineticjs-content').css("zoom","0.62");
}function nonzoom(){
	iszoom=false;
	$('.kineticjs-content').css("zoom","1");
}
</script>

Step: add_text (button) drap text ok Step zoom (button) drap text error position https://jsfiddle.net/k4bd5y5s/

Please help me fix it.Thank