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.



 



Enjoy!

One thought on “jQuery UI and Windows 8 and Internet Explorer 10 touch screens

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>