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

非常感谢您提前的帮助！

- Jeremy Belolo

Answer 1

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

你可能需要将dragged设置为绝对定位，并相应地设置偏移量。

- Tong Shen

Answer 2

如果一切正常工作，那么你只需要从事件数据中读取鼠标位置即可：

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

你可能还需要添加一个偏移量，但这就是思路。

注意，对于手机，你需要查找event.touches数组。

一些有用的页面：

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

- Shomz