title: Ionic and AngularJS - Drag element and move it around - how to get mouse position?
body: <p>So I'm trying to have a HTML element dragged around the page with my finger (or mouse, on desktop). The element is hidden at first, three other are shown, and when dragging one of them the hidden element reveals and moves with the finger - the initial element stays in place. When released, the dragged element disappears.</p>
  
  <p>So here is what I did : </p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_1" class="large greenbg" ng-class="{shadowClass: doshadow==1}"&gt;drag 1&lt;/div&gt;
  &lt;div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_2" class="large redbg" ng-class="{shadowClass: doshadow==2}"&gt;drag 2&lt;/div&gt;
  &lt;div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_3" class="large bluebg" ng-class="{shadowClass: doshadow==3}"&gt;drag 3&lt;/div&gt;
  
  &lt;div id="dragged" class="mini" ng-class="{hidden: doshadow == 0}" ng-style="draggedStyle"&gt;dragged&lt;/div&gt;
  </code></pre>
  
  <p>Controller : </p>
  
  <pre><code>myApp.controller("playerCtrl", ["$stateParams", "$scope", function($stateParams, $scope) {
      $scope.player = $stateParams.playerId;
  
      $scope.doshadow = 0;
      $scope.draggedStyle = {};
  
      $scope.onDrag = function(event)  {
          //console.log('Reporting : drag');
          console.log(event.target.className);
  
          $scope.doshadow = event.target.id.substr(8, 1);
  
          $scope.draggedStyle = {
              'left': '30px',
              'top': '50px'
          };
      }
      $scope.onRelease = function(event)  {
          //console.log(event.target);
  
          $scope.doshadow = 0;
          $scope.draggedStyle = {};
      }
  }]); 
  </code></pre>
  
  <p>So this works perfectly... The only thing that I still need to do - and don't know how - is to fix the position according to the movement, and not fix it to 30px / 50px as it's currently done.</p>
  
  <p>So two things : 
  - Am I doing things right ?
  - Can you help me figure out something with this mouse issue ?</p>
  
  <p>I'm a beginner with Angular, and getting to this took me 6 hours of work :D</p>
  
  <p>Thank you very much ahead !</p>