vue-smooth-dnd integration with quasar ui framework broken on mobile platforms

[rokelber]

I am trying to integrate the vue-smooth-dnd plugin (which I am generally loving, by the way) with the Quasar UI framework on top of vue.js. Things seems to work wonderfully with desktop browsers (Chrome and Safari), as well as mobile emulation in the desktop browser. However, when I test on real mobile devices (iOS 11+ in particular) with Chrome and Safari, it seems the "preventDefault" of the drag / mouse-move event does not function properly, and results in unusable drag/drop functionality. The window flickers terribly, and the window scrolling is not controllable, basically rendering the drag-and-drop unusable.

I have been able to test and use the vue-smooth-dnd without the Quasar framework, and the drag-and-drop works beautifully on mobile devices, so there is something in particular about using vue-smooth-dnd with Quasar that doesn't seem to work correctly. Hoping you can help identify a solution to get this working more smoothly.

NPMs: [email protected] [email protected] [email protected]

I am new to this development space, so I appreciate the patience and help.

[rokelber]

I am able to work-around the issue by adding this to the smooth-dnd/src/mediator.js:

window.addEventListener('touchmove', e => { if (isDragging) { e.preventDefault() } }, { passive: false })

[zabaat]

Is this still an issue, I'm quite reliant on quasar and this looks really good but I'm worried about this.

[dword-design]

Fixed this in my own fork (see above). Still would be nice if this would be fixed in the original repo

[timneedham]

Hi,

I tried the fix by @rokelber and @dword-design, but doesn't seem to shift it on Quasar 0.17.23. Any thoughts anyone?

Edit: More specifically, having trouble building, I think. 😊

[timneedham]

Sorry for the noise, yeah:

https://github.com/webpack/webpack/issues/8082

So pinning at:

{
  "webpack": "4.19.1",
  "webpack-cli": "2.1.4"
}

Sorted the build for me.