Demo page and touch functionality not working on mobile Android

[jasonpang]

Dragula seems like an excellent library, but I couldn't find anything on the documentation or previously opened issues for whether mobile Android was supported.

When I tried out the demo page, I wasn't able to use the drag and drop functionality. I tried long-pressing, pressing, scrolling, and pinching, but none of this worked.

Is there a flag I have to turn on, or is mobile Android not supported?

[jasonpang]

Strangely enough, react-dragula's demo does work, while both the main dragula's demo and angular-dragula's demo does not work on Android. Using Android 5.1.1 with latest Chrome browser.

[daisythephoenix]

I couldn't get the demo page to work on Mobile web either.

[bevacqua]

Sounds like a bug. Could you try and pinpoint the issue?

[daisythephoenix]

Thanks for the prompt reply. All I did was to open the demo page (http://bevacqua.github.io/dragula/) on the mobile browsers (I tried chrome and safari) on my phone (6s, ios 9.0.2). None of the example works.

[daisythephoenix]

I also thought my phone was broken. Then I tried another drag-n-drop plug in and it worked (http://rubaxa-sortable.meteor.com). Thanks!

[MaxxWyndham]

@bevacqua

I've found three places that needed changing to get the current version to play nice on android:

1. https://github.com/bevacqua/dragula/blob/master/dist/dragula.js#L134

var ignore = whichMouseButton(e) !== 1 || e.metaKey || e.ctrlKey;

changed to

var ignore = (e.which !== 0 && e.which !== 1) || e.metaKey || e.ctrlKey;

2. https://github.com/bevacqua/dragula/blob/master/dist/dragula.js#L158

if (whichMouseButton(e) === 0) {

changed to

if (e.which !== 0 && e.which !== 1) {

3. https://github.com/bevacqua/dragula/blob/master/dist/dragula.js#L162-L164

if (e.clientX === _moveX && e.clientY === _moveY) {
  return;
}

commented out (e.clientX is undefined, as is _moveX)

//if (e.clientX === _moveX && e.clientY === _moveY) {  
//    return;  
//}  

The alternate whichMouseButton logic I lifted from the react-dragula demo page. I have no idea if these changes work on iOS or what side-effects they may cause. Hope this helps.

[bevacqua]

Note that that logic was used for fixes in 3.5.1. If we can preserve those fixes then go ahead and submit a PR.

https://github.com/bevacqua/dragula/blob/master/changelog.markdown#351-which-hunt

[MaxxWyndham]

PR submitted: #240
Let me know if I've made any sort of faux pas. Theoretically this covers #236 but I have no way of testing that.

[jasonpang]

Holy crap you guys are fast...

[daisythephoenix]

Thank you!!! @MaxxWyndham and @bevacqua Is the Meteor package updated automatically as well? Or should I just try with a script link included in the header?

[MaxxWyndham]

@bevacqua Is there anything else I need to do?

[mrspaularich]

Hi there, I am looking for a drag and drop that works on both desktop and mobile and dragula looks great and seems to fit the bill. Are there any updates on when or if this fix will be included?

[bevacqua]

Resolved in 3.5.3

[yarimadam]

I was waiting for it. Thank you very much. @bevacqua