javascript - 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>

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

所以这很完美...我仍然需要做的唯一一件事 - 并且不知道如何 - 是根据运动固定位置，而不是像目前所做的那样将其固定为 30px/50px。

所以有两件事:- 我做的对吗？- 你能帮我解决这个鼠标问题吗？

我是 Angular 的初学者，我花了 6 个小时才开始学习 :D

非常感谢您!

Answer 1

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

您可能需要使 dragged 成为绝对的，并相应地设置偏移量。