Interact.js draggable elements prematurely "dropped" in chrome and android emulator

Question

I'm updating an old Ionic + Angular app, and am seeing a strange behaviour: elements made draggable with Interact.js will drag for a few hundred milliseconds, only to abort prematurely and fire the dragend event. The strange part is that the behaviour is only visible when testing the app in an android device, and in chrome via ionic serve. Firefox via ionic serve works fine!

I've tried to isolate this as much as I can, running exactly the example from the docs within a component in my Ionic 7 + Angular 17 + Capacitor 6 app:

package.json:

    "@interactjs/types": "^1.10.26",
    "interactjs": "^1.10.26",

component:

import interact from 'interactjs';

...

const position = { x: 0, y: 0 }

interact('#test-draggable').draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy

      event.target.style.transform =
        `translate(${position.x}px, ${position.y}px)`
    },
  }
})

...to no avail! can anyone else reproduce this? it's like all you can do is nudge elements a few pixels. i'm at a point where i don't know what i'm missing, and i really don't want to rewrite this thing using a different dragging library. perhaps something about angular change detection?

thanks in advance everyone! take good care.

Answer 1

This answer worked for me. How s/he found this i have no idea lol.

Add this css to the parent element within which you are dragging things around:

.parent-container {
    touch-action: none;
}