Ionic und AngularJS - Element ziehen und verschieben - wie bekomme ich die Mausposition?

Question

Also ich versuche, ein HTML-Element mit dem Finger (oder Maus, auf dem Desktop) um die Seite gezogen werden. Das Element wird zuerst ausgeblendet, drei andere werden angezeigt, und wenn Sie eines davon ziehen, wird das verborgene Element sichtbar und bewegt sich mit dem Finger - das ursprüngliche Element bleibt an seinem Platz. Wenn das Element losgelassen wird, verschwindet es.

hier So ist das, was ich getan habe:

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

diese So funktioniert perfekt ... Das einzige, was ich noch tun müssen - und weiß nicht wie - ist es, die Position entsprechend der Bewegung zu fixieren, und es nicht auf 30px/50px zu fixieren, wie es gerade gemacht wird.

Also zwei Dinge: - Mache ich Dinge richtig? - Können Sie mir helfen, etwas mit diesem Mausproblem herauszufinden?

Ich bin ein Anfänger mit kantigem, und dies immer hat mich 6 Stunden Arbeit: D

Sie sehr viel voraus Dank!

Answer 1

Blick auf die $event Objekt, was Sie wäre event.gesture brauchen, in dem Sie ein center Feld finden, das ist das Zentrum der aktuellen Position für Ihre Geste.

Möglicherweise müssen Sie dragged absolut eingeben und die Offsets entsprechend einstellen.

Answer 2

Wenn alles perfekt funktioniert, dann brauchen Sie nur die Mausposition aus den Ereignisdaten zu lesen:

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

Sie müssen wahrscheinlich ein ebenso Offsetzumischung, aber das ist die Idee.

Hinweis, für Telefone müssen Sie nach dem event.touches Array suchen.

Einige nützliche Seiten:

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