Ionic and AngularJS - Drag element and move it around - how to get mouse position?

Question

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.

So here is what I did :

HTML :

<div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_1" class="large greenbg" ng-class="{shadowClass: doshadow==1}">drag 1</div>
<div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_2" class="large redbg" ng-class="{shadowClass: doshadow==2}">drag 2</div>
<div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragger_3" class="large bluebg" ng-class="{shadowClass: doshadow==3}">drag 3</div>

<div id="dragged" class="mini" ng-class="{hidden: doshadow == 0}" ng-style="draggedStyle">dragged</div>

Controller :

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 = {};
    }
}]); 

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.

So two things : - Am I doing things right ? - Can you help me figure out something with this mouse issue ?

I'm a beginner with Angular, and getting to this took me 6 hours of work :D

Thank you very much ahead !

Answer 1

Look at the $event object, what you need would be event.gesture, in which you will find a center field that is the center of the current position for your gesture.

You may need to make dragged absolute, and set the offsets accordingly.

Answer 2

If everything is working perfectly, then you just need to read the mouse position off the event data:

$scope.draggedStyle = {
        'left': event.clientX,
        'top': event.clientY
    };

You probably need to add an offset as well, but that's the idea.

Note, for phones, you need to look for the event.touches array.

Some useful pages:

• https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
• https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent