Gridstack.js: Touch devices problems

Created on 5 May 2016  路  8Comments  路  Source: gridstack/gridstack.js

I found few quickly closed issues in github history, anyway:
Adding TouchPunch does not work, even your demo page here:
http://troolee.github.io/gridstack.js/
which has added TouchPunch lib does not work on any of my touch devices (not in one column mode).

Why you not prepare one single demo for touch devices? (there is no working demo online)
I spend many hours of trying (and reading your touch manual) and it still not work.

(my try is here http://hhh.imasik.cz)
Thx for your time

Most helpful comment

Hey again. Final solution for all Android/Microsoft touch browsers that i tested is:
-Remove touch-punch lib
-Add jquery.ui.touch lib (https://www.npmjs.com/package/jquery.ui.touch)
-Add handling for all "touchable" elements:
$('.grid-stack').addTouch();
-To support Microsoft Edge browser, you have to disable default Microsoft touch handling in CSS:
$('.grid-stack').css("touch-action", "none");

This works on Android and Windows Touch devices (no idea if it works on iOS) :)

All 8 comments

What device do you have? It's working fine on my iphone.

Recorded from the phone (not emulator): https://youtu.be/hE3Fq9aI7kU

Actually trying:
"Lenovo Miix3 - Microsoft Edge"
"Samsung S7 - Chrome, Default browser"
No one works.

...Now when you posted video, i tried Firefox on Lenovo Miix and there it really works. So its just problem of browsers and touch-punch.
Thank you for your time (video). Really appreciate it.

Hey again. Final solution for all Android/Microsoft touch browsers that i tested is:
-Remove touch-punch lib
-Add jquery.ui.touch lib (https://www.npmjs.com/package/jquery.ui.touch)
-Add handling for all "touchable" elements:
$('.grid-stack').addTouch();
-To support Microsoft Edge browser, you have to disable default Microsoft touch handling in CSS:
$('.grid-stack').css("touch-action", "none");

This works on Android and Windows Touch devices (no idea if it works on iOS) :)

I just stumbled on this issue. I can confirm that it doesn't work on iphone 6 iOS 12.0.1

Hey again. Final solution for all Android/Microsoft touch browsers that i tested is:
-Remove touch-punch lib
-Add jquery.ui.touch lib (https://www.npmjs.com/package/jquery.ui.touch)
-Add handling for all "touchable" elements:
$('.grid-stack').addTouch();
-To support Microsoft Edge browser, you have to disable default Microsoft touch handling in CSS:
$('.grid-stack').css("touch-action", "none");

This works on Android and Windows Touch devices (no idea if it works on iOS) :)

Hey, can you please upload the code for this to codepen or jsffidle or any other ? please --> http://hhh.imasik.cz

I can confirm that the grid from link http://hhh.imasik.cz is working on iOS

I can confirm that it doesn't work on ms surface pro

Was this page helpful?
0 / 5 - 0 ratings