Drag gesture not working properly on mobile device


#1

Hi,
I’m trying to use simple drag gesture in my application. Everything works as expected in browser (Chrome v33.0) but when I run it on my mobile device I get only 1 drag event. I’m using ionic (v1.0.0-beta.1) in combination with angularjs(1.2.12).
I’ve created simple project using generator-ionic and added directive test.
Here is the directive snippet (just link function):

link: function postLink(scope, element, attrs) {
            scope.dragCount = 0;
            var dragFn = function (e) {
                scope.dragCount++;
                console.log(scope.dragCount)
            }
            scope.$on('$destroy', function () {
                $ionicGesture.off(dragGesture, 'drag', dragFn);
            });
            var dragGesture = $ionicGesture.on('drag', dragFn, element);

        }

Directive is in home view:

<ion-view>
  <ion-content scroll="false">
    <div test>test</div>
  </ion-content>
 </ion-view>

When I’m running the app on mobile device I’m catching the log messages from directive in Eclipse’s LogCat. With this code I get only 1 log message per dragging while in browser it works as expected with multiple log messages.
I’ve tried to replace <ion-content> with <ion-pane> but I get the same result. It seems to me like some mechanism is blocking or preventing drag gesture event.
If I remove scroll="false" then drag event is working normally on mobile device (I got multiple log messages). But then I have scroll element which I don’t need on my homepage and which is interfering with vertical drags that I want to have on my elements.
Has anyone encountered with this kind of behavior? Have I forgot something to initialize for gestures on mobile devices? Does the class "disable-user-behavior" which is added by hammer.js prevent dragging on mobile device?
The mobile device which I use for developing is LG E440 with Android version 4.1.2. Please help me because I’m getting pretty desperate after going in circles for few days now. Thanks.


$ionicGestures drag event called just once in a 'long drag'
#2

I have tried the same code on Sony Xperia U with Android version 4.0.4 and everything works properly. I guess this issue is related to mobile device or Android version.


#3

It’s broken on HTC One Android 4.4.2


#4

Not working for ionic view for iphone… is there any update? here’s my code, what went wrong?

link:function(scope,element,attr){
  var startX=0,startY=0
  var endX = 0, endY = 0
  var x=10,y=10

  element.css({
    // 'position': 'relative',
    'position': 'absolute',
    'border-color': 'blue',
    'border-style': 'solid',
    'border-top-width': '100px',
    'border-right-width': '2px',
    'border-bottom-width': '100px',
    'border-left-width': '2px',
    'cursor': 'pointer',
    'z-index': '100'
  });


  var dragGes = $ionicGesture.on('drag',dragFn,element)
  function dragFn(event){
    event.preventDefault()
    endX = event.gesture.center.pageX - x
    console.log(endX)
    element.css({
      left: endX + 'px'
    })
  }