(At least!) Pan Recognizer broken in Chrome 55 and Mobile Safari

I did my own implementation of drag&drop with the latest ember-gestures lib, which depends on hammer.js and is also developed by @runspired. On desktop, all of the code works pretty well, but on Mobile/Chrome devtools emulator/Touch devices, this fails big time!

Is there any fix for this? I’m working on a rather big project which decided to go with hammer.js and ember-gestures a few months ago as it seemed like the most promising/actively developed library out there… so this is quite frustrating…

Here is a short code sample of my implementation (if it helps):

//ember-gestures/recognizers/drag.js
export default {
  include: [],
  exclude: [],
  eventName: 'pan',
  options: {
    direction: typeof Hammer === 'undefined' ? '' : Hammer.DIRECTION_ALL
  },
  recognizer: 'pan'
};

// parentComponent.js
import Ember from 'ember';
import RecognizerMixin from 'ember-gestures/mixins/recognizers';

const {
  Component,
  on,
  run: {bind},
  $
} = Ember;

export default Ember.Component.extend({
  
  recognizers: 'tap press drag',

  willDragElement: on('press', function (event) {
    const $target = $(event.target).closest('.draggable');
    const $dragClone = $target.clone();

    $dragClone.data(
      some: 'custom',
      data: 1
    )
    this.startDrag($dragClone);
  }),

  startDrag ($draggable) {
    const $dragSurface = this.$('#drag-surface');
    
    $dragSurface.append($draggable);
   
    this.on('panStart', function () {
      // .... THIS GET'S NEVER CALLED ON TOUCH DEVICES/CHROME DEVTOOLS EMULATOR!
      console.info('pan started!');
    });
    
    this.on('panMove', bind(this, 'moveDraggable'));
    
    this.on('panEnd', bind(this, function () {
       // .... THIS GET'S NEVER CALLED ON TOUCH DEVICES/CHROME DEVTOOLS EMULATOR!
      console.info('pan started!');
    }));
  },

  moveDraggable (event) {
       // .... THIS GET'S NEVER CALLED ON TOUCH DEVICES/CHROME DEVTOOLS EMULATOR!
   }
});

[beeduul]

@herom the other thing i notice in your code is that you are using camelCase for the pan event strings. http://hammerjs.github.io/recognizer-pan/ shows they’re lowercase.

[LeJared]

An example is not “minimal” if a heavy library like ember is included. Panning examples on http://hammerjs.github.io/ still work on iOS Safari (10.2) and desktop Chrome (56).

So maybe the bug is in ember-gestures?