title: Get X and Y of a shape after dragging in Konva JS
body: <p>I'm using Konva JS in my project. I'm adding a shape on a button click which is draggable. On click of the shape i need to get X and Y positions of the shape. <code>getX</code> and <code>getY</code> functions are returning the original X and Y. How can I update the X and Y after dragging. </p>
  
  <p>Example code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var stage = new Konva.Stage({
          container: 'canvas', // id of container &lt;div&gt;
          width: 500,
          height:300
      });
      
   jQuery("#add-shape").click(function(){
   addShape();
   });
   
   var addShape = function(){
   
   console.log("add shape");
   
   var layer = new Konva.Layer();
   var parentContainer = new Konva.Rect({
              x: stage.getWidth() / 2,
              y: stage.getHeight() / 2,
              width: 200,
              height: 60,
              cornerRadius: 10,
              fill: '#ccc'
          });
          
          var smallCircle = new Konva.Circle({
              x: stage.getWidth() / 2 + 200,
              y: stage.getHeight() / 2 + 30,
              radius: 15,
              fill: "#F2784B",
              stroke: "white",
              strokeWidth: 2
          });
          
          smallCircle.on('click', function() {
           console.log(this.getX(),this.getY());
             addArrow(this.getX(),this.getY());
            //get current X and Y here instead of origina X and Y
          });
          layer.add(parentContainer);
          layer.add(smallCircle);
          layer.draggable('true');
          stage.add(layer);
  }
  
  var addArrow = function(arrowX,arrowY){
    var connectorLayer = new Konva.Layer();
   var connector = new Konva.Arrow({
              points: [arrowX,arrowY,arrowX+10,arrowY],
              pointerLength: 4,
              pointerWidth: 4,
              fill: 'black',
              stroke: 'black',
              strokeWidth: 2
          });
      connectorLayer.add(connector);
      stage.add(connectorLayer);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"&gt;&lt;/script&gt;
  &lt;button id="add-shape"&gt;
        Add shape
        &lt;/button&gt;
  &lt;div id="canvas"&gt;
          
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>