Jquery Ui Touch Punch Is Not Working In Chrome And Opera On Android Device

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 Firefox mobi

Solution 1:

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.

Solution 2:

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

<scripttype="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

<scripttype="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)

Solution 3:

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

Solution 4:

after the version 70 chrome does not supports touch events.So you need to replace below line, jquery-ui-touch-punch/jquery.ui.touch-punch.js Line 14

$.support.touch = 'ontouchend'indocument; 

to

$.support.touch = 'ontouchend'indocument || navigator.maxTouchPoints > 0;