I recently did a blog post describing how to enable the jQuery UI drag effects. In this post I showed how to get the draggable effect to work on an iPad. While that works just fine it isn’t the end of the story. Microsoft has shipped Windows 8 and Internet Explorer 10 and the jQuery UI draggable effect doesn’t work there as is.
The solution
Fortunately the solution is a lot simpler and doesn’t require an additional plug-in. It turns out that Internet Explorer 10 has quite a good support for pointer and gesture events. What we need to do is take control of the action IE10 performs on touch. By default the browser takes care of things and in this case we don’t want that and take control ourselves using jQuery UI.
It turns out this is rather simple. There is an IE10 specific CSS settings called -ms-touch-action. Setting its value to ‘none’ is all we need to do. This will suppress the default IE10 behavior and pass the gestures on to the jQuery event handler.
1: $("#draggable").css('-ms-touch-action', 'none');
Try for yourself
I have enhanced my small demo page here. You can toggle the support for touch events using the button to try both with and without support for touch.
Enjoy!
thanks! have been searching for hours on how to make swiping work on IE10.
Thank you very much!!! I had this problem with IE11. Thank you again.
Thanks, dude! You save me a lot of time. Works like a charm)
Woohoo. I’ve been tearing my hair out trying to figure out why I couldn’t get touch to work in my webUI. (I had the problem on a Surface Pro 3 in IE11) I wish I found your blog ages ago! Cheeers.