interact.js 1.2.4 drag and gesture action confusion

Question

I have an issue with interact.js 1.2.4 and iPad Retina iOS 8.1 Mobile Safari, which I need to resolve somehow. The problem occurs in a sorting component nested inside a large sequential learning web-application, where the user solves a succession of tasks. The interact.js plugin is used for adding drag/drop behavior so the user can sort elements in the correct order. The site is live, but the issue I'm about to describe is now persistent and reproducible, so it needs to be solved quick.

Here's the setup. We've initialised a number of draggable elements with

interact('.drag').draggable(...);

and we've registered onstart, onmove and onend listeners, which are handled manually with callback functions.

In most cases, the drag drop behavior acts as planned. But when using the sorting component in certain parts of the application sequence, the actionName of an interaction is inexplicably "gesture" instead of "drag", which makes the validateAction (interact.js) function return null instead of a valid action. This in turn causes the pointerDown (interact.js) handler to never get fired, so the drag motion is never initiated, and the element stays put forever, making it impossible to progress further in the sequence. The behavior only occurs on iPad. If I run the site in an iPad simulator and inspect the element with Safari's developer tools crosshair functionality, something changes the element, and the next interaction's actionName suddenly becomes "drag", so the component starts to work as intended and the user can proceed in the sequence.

Do you have any idea as to:

1. What causes the website to relay a "gesture" action instead of a "drag" action?
2. What excactly happens when I use the inspection crosshair? Why does it change behavior?
3. How do I solve this issue?

You can see the component code here , but it's part of a major Backbone solution, so this is all I can include.

Thanks in advance.

Answer 1

We still don't know the cause, but seemingly there is a bug in iOS, which causes the application to fire 5 pointer events at once. Thus, the plugin registers the event as a gesture, and the drag drop functionality fails. The plugin creator gave this suggestion, which fixed the issue:

interact(document).on('down', function (event) {
  var interaction = event.interaction;
  var canGesture = interaction.target && interaction.target.options.gesture.enabled;
  var maxAllowedPointers = canGesture? 2 : 1;

  while (interaction.pointers.length > maxAllowedPointers) {
      interaction.removePointer(interaction.pointers[0]);
  }
})