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