Android drag gesture (ionic.onGesture)

ionic-v1
1

The drag event works like a charm on iOS, but not on Android. The only way to drag an element is doing a double tap and hold, on iOS just a single tap and hold (as should be).

Suggestions? Do you think it’s a bug?

I just used this snippet from the angularjs doc and replaced mousedown with dragstart, mousemove with drag and mouseup with dragend.

As wrote it’s ok on iOS!

Thanks

2

What version of android are you testing this on?

3

Latest version: KitKat 4.4.2

4

hmm, do you mind posting a sample of your code? Or even a codepen?

5

sure:

directive('draggable', function($document, $timeout) {
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0, width =0, elementW = 0, elementH = 0;
    $timeout(function() {
      elementW = element.prop('clientWidth');
      elementH = element.prop('clientHeight');
    },200);

    element.on('dragstart', function(event) {
      // Prevent default dragging of selected content
      event.gesture.preventDefault();
      startX = event.gesture.center.pageX - x;
      startY = event.gesture.center.pageY - y;
      $document.on('drag', move);
      $document.on('dragend', release);
    });

    function move(event) {
      y = event.gesture.center.pageY - startY;
      x = event.gesture.center.pageX - startX;
      if (x >= 0 && x <= (parentWidth-elementW)) {
        element.css({
          left:  x + 'px'
        });
      }
      if (y >= 0 && y <= parentHeight-elementH) {
        element.css({
          top:  y + 'px'
        });
      }
    }

    function release() {
      $document.unbind('drag', move);
      $document.unbind('dragend', release);
    }
  };
})

I take the parentWidth and parentHeight from another directive.

6

I’m trying to implement it but because its only a partial of your code, I’m having some difficulties. Mind putting a codepen together, then I can transfer it to an android device?

7

Ok, I’ve tried to extract the code from my app. Maybe it’s a bit buggy… but should work.

codepen

8

Do you actually have a side menu in your app? I installed in on Android 4.1 and was able to drag it right away but, once I removed the sidemenu

9

yep, I have a side menu… but in the view where I use the draggable directive I’ve disabled the drag for the side menu… like the codepen.

So it’s a conflict with the sidemenu. Do you think it’s a bug?

10

It could be. I know there was some work done for android to resolve some dragging issues with the side menu. I’ll open an issue for this just to be sure.

11

Ok thanks! maybe link also the github issue so I can track it!

12
13

@mhartington : I’ve tested my app without the sidemenu and on Android I have the same problem.

14

any news here? I’m also facing this problem.

15

I know this is kind of an old post, but for anyone still looking I will share my experience with draggable elements on mobile phones, although this doesn’t seem to be the issue here. I had a similar problem, where you had to double tap the element to get it to drag. For me the solution was to disable the scroll on the draggable elements or even the parent (container) of those elements, because that would intervene and trigger before the drag.

1 Like