Ionic和AngularJS - 拖动元素并移动它 - 如何获得鼠标位置？

Question

所以我试图用手指(或鼠标,桌面)在页面上拖动一个HTML元素.首先隐藏元素,显示其他三个元素,当拖动其中一个元素时,隐藏元素会显示并随手指移动 - 初始元素保持原位.释放后,拖动的元素消失.

所以这就是我所做的:

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>

控制器:

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

所以这完美地工作......我仍然需要做的唯一事情 - 并且不知道如何 - 根据运动来固定位置,而不是像目前那样将它固定到30px/50px.

所以有两件事: - 我做得对吗？ - 你能帮我弄清楚鼠标问题吗？

我是Angular的初学者,而这需要我6个小时的工作:D

非常感谢你!

Answer 1

查看该$event对象，您需要的是event.gesture，在其中您将找到一个center字段，该字段是您手势当前位置的中心。

您可能需要设置dragged绝对值，并相应地设置偏移量。