The Problem Solver

Tell me and I will forget
Show me and I will remember
Involve me and I will understand
- Confucius -

Google Ads

This Blog





  • View Maurice De Beijer's profile on LinkedIn


Email Notifications



jQuery UI and Windows 8 and Internet Explorer 10 touch screens

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.



Published Wed, Oct 24 2012 21:34 by Maurice
Filed under: , ,


# re: jQuery UI and Windows 8 and Internet Explorer 10 touch screens@ Monday, January 14, 2013 9:33 AM

thanks! have been searching for hours on how to make swiping work on IE10.

by win