title: Report x,y coordinates after mouseup button event happens
body: <p>This jsfiddle allows one to drag around a square. It uses angularjs.</p>
  
  <p><a href="http://jsfiddle.net/zargyle/35z4J/" rel="nofollow">http://jsfiddle.net/zargyle/35z4J/</a></p>
  
  <p>I would like the console to report the x,y coordinates after the mouse button is lifted. Currently, the console only sends the <code>STOPPING</code> message. Below is the relevant controller code. </p>
  
  <pre><code>.controller('testCtrl', function($scope) { 
      $scope.dragOptions = {
          start: function(e) {
            console.log("STARTING");
          },
          drag: function(e) {
            console.log("DRAGGING");
          },
          stop: function(e) {
            console.log("STOPPING");
          },
          container: 'container'
      }
  </code></pre>
  
  <p>How can the code be modified such that the console report the x,y coordinates after the mouse button is lifted?</p>
  
  <p>EDIT: The answer has been provided for the x,y coordinates of the mouse pointer. Suppose I want to get the x,y coordinates of the centre of the square. How can that be done?</p>