最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Ionic and AngularJS - Drag element and move it around - how to get mouse position? - Stack Overflow

programmeradmin0浏览0评论

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.

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.

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

Thank you very much ahead !

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.

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.

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

Thank you very much ahead !

Share Improve this question asked Nov 30, 2014 at 0:54 Jeremy BeloloJeremy Belolo 4,5416 gold badges50 silver badges104 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

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.

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

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.

Some useful pages:

  • https://developer.mozilla/en-US/docs/Web/API/DragEvent
  • https://developer.mozilla/en-US/docs/Web/API/TouchEvent
发布评论

评论列表(0)

  1. 暂无评论