jquery-ui-touch-punch

jquery-ui-touch-punch copied to clipboard

I have tested the dragging sample in IE 10 on Windows 8, and it does not work with touch. The browser tries to scroll the page instead.

The same behaviour happens with IE 10 on Windows RT.

In IE 10 on Windows Phone 8, it also does not work properly. Some touches are recognized, but most of them are also interpreted as page scrolling. For example you can manage to drag a few pixels, but then the page starts to scroll.

I think this is an explanation how to implement IE 10 support:

http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx#step4

The fix looks straightforward, but unfortunately I don't have a device available for testing. Maybe I should put a call for devices on the donation section of the site :). I will see if I can get my hands on one. In the meanwhile, if you think you can, please fork and take a pass at implementing this fix.

Sometimes I hit up the local T-Mobile for a little device testing... Ghetto? Maybe. Effective and cheap? Definitely.

Sent from my tablet. Please excuse brevity, spelling, and punctuation.

On Nov 19, 2012, at 7:26, Dave Furfero [email protected] wrote:

The fix looks straightforward, but unfortunately I don't have a device available for testing. Maybe I should put a call for devices on the donation section of the site :). I will see if I can get my hands on one. In the meanwhile, if you think you can, please fork and take a pass at implementing this fix.

— Reply to this email directly or view it on GitHub.

For me, adding IE10 touch support was as simple as adding the CSS property "-ms-touch-action: none" to the elements that needed touch interaction. This works because IE10 "fires mouse events for the primary contact", and the above CSS property "disables all pan/zoom behaviors and fire[s] pointer events in JavaScript instead".

The Dev Center documents the possible values for the CSS property which might be useful to you.

Unless you need to support multiple touch points, it's probably a lot simpler to just include this CSS property on the elements that need it.

Interestingly, the YUI team filed a bug (though I can't access it) against IE10 about the fact that there's no programmatic equivalent to -ms-touch-action - which presumably should be event.preventDefault().

First, totally awesome script - terrific job! Second, it will not work on IE10 in Windows Mobile 8 (and presumably Windows RT), because they do not use the touchstart, touchmove, and touchend events, but rather have their own pointer events, which incorporates touch, stylus, etc., and are: MSPointerDown, MSPointerMove, and MSPointerUp. I modified the script to add support for Windows Mobile devices by:

1. Adding support detection for MS Pointer events:

$.support.touch = 'ontouchend' in document || 'onmspointerup' in document;

2. Binding the MS Pointer events to their handlers:

self.element
  .bind('touchstart', $.proxy(self, '_touchStart'))
  .bind('touchmove', $.proxy(self, '_touchMove'))
  .bind('touchend', $.proxy(self, '_touchEnd'))
  .bind('MSPointerDown', $.proxy(self, '_touchStart'))
  .bind('MSPointerMove', $.proxy(self, '_touchMove'))
  .bind('MSPointerUp', $.proxy(self, '_touchEnd'));

3. Adding the CSS to the draggable elements in my jQuery-UI stylesheet to disable the MS mouse events:

.ui-draggable { -ms-touch-action: none; }

Hope this helps.

Cheers,

Hal

EDIT: I just downloaded Windows 8 on a VM, and there were three more things needed to get it going on IE10 in both desktop and Metro:

1. Added the isPrimary condition to ignore multi-touch events, since event.originalEvent.touches is undefined
2. Set touch variable to check for changedTouches collection, and use the event.originalEvent object if it is undefined
3. Created variable to hold the current touchpoint using changedTouches/event.originalEvent object (as above) to see if another widget is already being handled

While I still haven't tested with an actual Windows RT device, I've got my finders crossed :)

halnesbitt's method above worked for me. Thank you!

Edit: This fork has updated code that fixes the IE issues. It's more up to date, so use it instead.

Given that IE10 fires mouse events for the primary contact, I don't see the need to rebind the MSPointerDown/Move/Up events, since equivalent mouse events are already going to get fired, and are already handled properly by jQuery UI. My own experience shows that just the CSS "-ms-touch-action: none" is necessary to make it work.

halnesbitt, any thoughts?

Mark - when I was testing, I could not get it to work on my Windows Phone 8 without binding the pointer events. This may or may not have been caused by the punch script itself - since it works by binding the touch events to their equivalent mouse events, and IE10 fires pointer events, then mouse events, my guess is that it fell flat because the mouse events that were supposed to be firing were bound to touch events, which it doesn't support (using pointer events, instead). However, good on you if you got it working with just the CSS; what device were you using?

halnesbitt, I was using a Lumia 920. Unfortunately I don't have access to any touch-enabled devices right now, but I've put together some super-simple tests, along with my predictions of which browsers touch interactions will work correctly on:

Pure jQuery UI 1.8.24; no touch support at all jQuery UI and Touch Punch 0.2.2; touch support on everything except IE10 jQuery UI and -ms-touch-action: none; touch support on IE10 only jQuery UI, Touch Punch and -ms-touch-action: none; touch support on everything, including IE10

I'll test these predictions when I next have access to some devices, but I'd be interested to hear how you get on with these, too!

I just tested on a Surface RT and can confirm that the last two demos work with touch in IE10

Interestingly enough, all of your demos worked on my Nokia Lumia 822, sort of. The last two worked flawlessly, while the first two would drag, very haltingly (and would move the screen as well), but they would definitely move. This lends credence that IE10 is firing the mouse events for the primary pointer. Tried the CSS-only method on my production site though, and it went back to falling flat without the MSPointer events being bound, though. I wonder if it is my version of jQuery (1.7) or perhaps a conflicting event tied to the same object, such as my tooltips plugin (I use it on a drag-and-drop shopping cart)? I'll do some more testing and let you guys know what I find.

I can confirm that add "-ms-touch-action: none" to specific elements enables touch to work in IE10...

i can confirm as well that "-ms-touch-action: none" fixes draggable in IE10 - tested on a Dell XPS 10 (Windows RT). The drag is laggy though :-/

.ui-draggable { -ms-touch-action: none; }

works on the Lumia 920 in our tests.

Nice work.

FYI, I've cherry-picked halnesbitt's fixes and included them in a fork here - https://github.com/paambaati/jquery-ui-touch-punch

drag is laggy in IE 10 on windows 8 laptop. I am using this link -- https://github.com/paambaati/jquery-ui-touch-punch . Also in Firefox vertical drag is not working. Please help

I recently had to tackle this issue, particularly handling Windows Phone devices, so I forked a fork of a fork of this library :)

https://github.com/markrian/jquery-ui-touch-punch-improved

See the latest commits for the details. It worked for me.

@markrian i just pasted your script in my code. I still have the same issue .Lags are there in IE 10 and vertical drag and drops are not working in Firefox. P.s i am using ui-sortable and included "-ms-touch-action: none;" in stylesheet.

@omipandey http://s.codepen.io/markrian/debug/EgykEr - that's a demo that uses my code, and it's all I tested with (it was all I needed to work). It's still not great, particularly on Windows Phone. I'm not sure how it can be improved.

Does anyone has solution? Pls help

Unfortunately jqueryui, this script, and the workaround listed in this issue still isn't working. -ms-touch-action: none; no longer works in Edge, you need the prefix-free version now.

Seems the jQuery ui folks use this same workaround in their own theme CSS to get it working in Edge but it still doesn't work in Chrome.

.ui-draggable  {
	touch-action: none;
	-ms-touch-action: none;
}

Works with my touch screen spectre in Chrome and Edge on Windows 10.