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

So I'm trying to have a HTML element dragged around the page with my finger (or mouse, on desktop). The element is hidden at first, three other are shown, and when dragging one of them the hidden element reveals and moves with the finger - the initial element stays in place. When released, the dragged element disappears.

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

So here is what I did :

所以这就是我所做的:

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

So this works perfectly... The only thing that I still need to do - and don't know how - is to fix the position according to the movement, and not fix it to 30px / 50px as it's currently done.

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

So two things : - Am I doing things right ? - Can you help me figure out something with this mouse issue ?

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

I'm a beginner with Angular, and getting to this took me 6 hours of work :D

我是Angular的初学者,到这里花了我6个小时的工作:D

Thank you very much ahead !

非常感谢你!

2 个解决方案

#1

Look at the $event object, what you need would be event.gesture, in which you will find a center field that is the center of the current position for your gesture.

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

You may need to make dragged absolute, and set the offsets accordingly.

您可能需要拖动绝对值,并相应地设置偏移量。

#2

If everything is working perfectly, then you just need to read the mouse position off the event data:

如果一切正常,那么您只需要从事件数据中读取鼠标位置:

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

You probably need to add an offset as well, but that's the idea.

您可能还需要添加偏移量,但这就是想法。

Note, for phones, you need to look for the event.touches array.

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

Some useful pages:

一些有用的页面:

#1