Ionic e AngularJS - Trascina l'elemento e spostalo - come ottenere la posizione del mouse?

Question

Quindi sto provando ad avere un elemento HTML trascinato sulla pagina con il mio dito (o il mouse, sul desktop). L'elemento è nascosto all'inizio, altri tre sono mostrati, e quando si trascina uno di essi l'elemento nascosto rivela e si muove con il dito - l'elemento iniziale rimane al suo posto. Una volta rilasciato, l'elemento trascinato scompare.

ecco quello che ho fatto:

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

Quindi questo funziona perfettamente ... L'unica cosa che ho ancora bisogno di fare - e non so come - è quello di fissare la posizione in base al movimento, e non aggiustarlo a 30px/50px come è attualmente fatto.

Quindi due cose: - Sto facendo le cose bene? - Puoi aiutarmi a capire qualcosa con questo problema del mouse?

Sono un principiante con angolare, e di arrivare a questo mi hanno preso 6 ore di lavoro: D

Grazie mille in anticipo!

Answer 1

guardano le oggetto $event, ciò che è necessario sarebbe event.gesture, in cui si trova un campo center che è il centro della posizione attuale per il tuo gesto.

Potrebbe essere necessario rendere dragged assoluto e impostare gli offset di conseguenza.

Answer 2

Se tutto funziona alla perfezione, allora solo bisogno di leggere la posizione del mouse fuori i dati dell'evento:

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

probabilmente è necessario aggiungere un offset pure, ma questa è l'idea.

Nota: per i telefoni è necessario cercare l'array event.touches.

Alcune pagine utili:

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