jQuery UI Touch Punch is not working in chrome and opera on android device

Question

Im using jQuery UI drag&drop and sortable in my website but its not working in android device browsers like chrome and opera but its working in default browser and Firef

Answer 1

I had the same issue. Take a look at this fork with a fix: https://github.com/fr33kvanderwand/jquery-ui-touch-punch

Your issue with the touch-punch events is beeing discussed here: https://github.com/furf/jquery-ui-touch-punch/issues/215

Answer 2

I think it may be browser compatibility, not all of the TouchPunch demos work on my Android 4.3 devices in Chrome or default browser, or iPad 4 for that matter.

TouchPunch does state that it is a hack so I'm avoiding it and trying to find another solution. Nestable seems to work nicely, but I don't think it is under active development.

Update
After writing my answer I read that the demos on TouchPunches GitHub page dont work on some mobile devices running chrome because GitHub may be serving JS as Text/Html.

Using the TouchPunch scrips locally or on a development server appears to work OK, its just the demo's on the Git Hub pages which have an issue with chrome for mobile.

Answer 3

I ran into the same issue with certain mobile browsers, while others worked well. I was able to fix if by adding type="text/javascript" to my script tag as follows

<script type="text/javascript"><!-- copy TouchPunch JQuery hack here --></script>

or if you have the js in an external file, be sure to add the type attribute

<script type="text/javascript" src="http://domain.com/pathtotouchpunchjsfile.js"></script>

(Side tip: for maximum compatibility among different browsers I use an ending script tag instead of just self-closing it)