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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s