Ionic and AngularJS - Przeciągnij element i przesuń nim - jak uzyskać pozycję myszy?

Question

Próbuję więc przeciągnąć element HTML palcem (lub myszką na pulpicie) wokół strony. Pierwszy element jest ukryty, trzy inne są pokazane, a podczas przeciągania jednego z nich ukryty element odsłania i przesuwa palcem - początkowy element pozostaje na swoim miejscu. Po zwolnieniu przeciągnięty element znika.

Więc oto co zrobiłem:

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> 

Kontroler:

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

Tak to działa idealnie ... Jedyne, co jeszcze trzeba zrobić - i nie wiem jak - ma naprawić pozycję zgodnie z ruchem, a nie naprawić go do 30px/50px, jak to jest obecnie zrobione.

Dwie rzeczy: - Czy robię wszystko dobrze? - Czy możesz pomóc mi znaleźć coś z tym problemem myszy?

Jestem początkujący z kątowe, a dotarcie do tego zajęło mi 6 godzin pracy: D

Dziękuję bardzo do przodu!

Answer 1

spojrzeć na obiekt $event, co trzeba byłoby event.gesture, w którym znajdzie center pole, które jest centrum aktualnej pozycji dla twojego gestu.

Być może konieczne będzie dokonanie absolutnego dragged i odpowiednie ustawienie przesunięć.

Answer 2

Jeśli wszystko działa idealnie, a następnie po prostu trzeba przeczytać pozycji myszy off danych zdarzeń:

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

Prawdopodobnie trzeba dodać offset, jak również, ale to jest pomysł.

Uwaga: w przypadku telefonów należy wyszukać tablicę event.touches.

Przydatne strony:

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