CODEWITHSUNDEEP
javascriptandroidangularjsionic-framework
Ben Taliadoros
Ben Taliadoros

Reputation: 9521

Android drag event not working on 4.4.2 with ionic

I have been implementing an Ionic app in AngularJS.

I have a list of 'cards' one on top of the other in a vertical fashion. The user can scroll to see more cards, or swipe them off the screen. This is fine on IOS (tested on the 5c and the 4) but on the HTC One M8 (Android) there is a bug, which doesn't allow user to swipe/drag an element.

I have seen this bug documented here:

https://github.com/driftyco/ionic/issues/1129 and http://uihacker.blogspot.tw/2011/01/android-touchmove-event-bug.html

However when I try to implement a solution such as the one offered in the latter link my app crashes.

My gesture handle events:

var self = this;

  ionic.onGesture('dragstart', function(e) {
    window.requestAnimationFrame(function() {
      self._doDragStart(e)
    });

  }, this.elemToDrag);

  ionic.onGesture('drag', function(e) {
    window.requestAnimationFrame(function() { 
      self._doDrag(e)
    });
  }, this.elemToDrag);

  ionic.onGesture('dragend', function(e) {
    window.requestAnimationFrame(function() { 
    self._doDragEnd(e); 
  });
  }, this.elemToDrag);
},

_doDragStart: function(e) {
},

_doDrag: function(e) {
    //handle dragging
},

_doDragEnd: function(e) {
  this.transitionOut(e);
}

I have tried adding e.preventDefault() to the events but it seems to do nothing. Any help would be much appreciated, thanks

Upvotes: 2

Views: 1431

Answers (2)

Ben Taliadoros
Ben Taliadoros

Reputation: 9521

This started working on Android when I started using iScroll-probe to take over the scrolling. I also used transforms for scrolling instead of native scroll.

Hope this helps

Upvotes: 0

Santiago Rebella
Santiago Rebella

Reputation: 2449

You could try to replicate the same code but using touchstart, touchmove and touchend as your events and as you mentioned in the bug link, preventing touchstart with preventDefault().

Alternative will be to replicate it with mousedown, mousemove, mouseup but detecting the device as in IOS will bring undesired side effects.

I mean you use the IONIC way in the devices that works and manually replicate the behaviour outside IONIC for those who doesnt. Ive been checking, seems there is no workaround yet.

Upvotes: 1

Related Questions