KinetJS zoom and pan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<a href="http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-circle-tutorial/">Circle Tutorial</a>
<br/>
<br/>
<div id="container"></div>

CSS

body, html {
    margin:0px; height: 100%; width: 100%;
}
#container {
    border: 0px dotted black; height: 100%; width: 100%;
}
canvas { background: #eee;
}

JavaScript

$( function() {
    
    var stage = new Kinetic.Stage({
        container : 'container',
        width: $("#container").width(),
        height: $("#container").height(),
    });
    var layer = new Kinetic.Layer();

    //layer.setDraggable("draggable");
    var center = { x:stage.getWidth() / 2, y: stage.getHeight() / 2};
    
    var circle = new Kinetic.Circle({
        x: center.x-100,
        y: center.y,
        radius: 50,
        fill: 'green',
        draggable: true
    });
    layer.add(circle);
    layer.add(circle.clone({x: center.x+100}));

    // zoom by scrollong
    document.getElementById("container").addEventListener("mousewheel", function(e) {
      var zoomAmount = e.wheelDeltaY*0.0001;
      stage.setScale(stage.getScale().x+zoomAmount)
      stage.draw();
      e.preventDefault();
    }, false)

    // pan by mouse dragging on stage
    stage.on("dragstart dragmove", function(e) {window.draggingNode = true;});
    stage.on("dragend", function(e) { window.draggingNode = false;});
    $("#container").on("mousedown", function(e) {
        if (window.draggingNode) return false;
        if (e.which==1) {
            window.draggingStart = {x: e.pageX, y: e.pageY, stageX: stage.getX(), stageY: stage.getY()};
            window.draggingStage = true;
        }
    });
    $("#container").on("mousemove", function(e) {
        if (window.draggingNode || !window.draggingStage) return false;
        stage.setX(window.draggingStart.stageX+(e.pageX-window.draggingStart.x));
        stage.setY(window.draggingStart.stageY+(e.pageY-window.draggingStart.y));
        stage.draw();
    });
    $("#container").on("mouseup", function(e) { window.draggingStage = false } );

    stage.add(layer);
});