Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
matt.schuh

Multi-touch breaks Draggable

Recommended Posts

Hi all,

I didn't want to necro my old thread so I'm posting a new one to see if there have been any updates. My old one can be found here. Essentially multi-touch monitors break GSAP draggable. Native scrolling works fine - you can touch the screen with as many fingers as you want (flat palm and even fist work) and it will still scroll. But for some reason draggable only works if there's a single finger on the screen. the moment a second touch point is detected the draggable element stops moving. Is there a way around this? I don't have the option of disabling multi-touch at a hardware, OS, or driver level so I have to deal with it within the website/web app. I don't need anything special to happen when a user scrolls with 1 finger vs 2 fingers vs 3 fingers etc. I just need it to keep scrolling. It's quite an accessibility challenge when only one finger is supported - the amount of older people who aren't dextrous enough to keep from accidentally pressing the screen with a second finger, or people who try to use more than one finger for all touch interaction, is much higher than you would think.

 

In the response to my original question, the linked post wants to allow default browser behavior. I disallow pinch zoom and other native multi-touch gestures in my applications so allowing them through draggable isn't the issue.

 

Also, in terms of testing, take any draggable example (preferably one with type:scroll) and test it on a multitouch display. 

 

Any assistance with this would be appreciated.

Share this post


Link to post
Share on other sites

Yeah, that's kinda by design because multi-touch typically enables other stuff like pinching/zooming. But to get the behavior you're after, why don't you set allowNativeTouchScrolling:false on your Draggable and then add this:

 

function ignoreEvent(e) {
  e.preventDefault();
  e.stopImmediatePropagation();
  if (e.preventManipulation) {
    e.preventManipulation();
  }
  return false;
}
document.addEventListener("touchstart", ignoreEvent, false);
document.addEventListener("pointerdown", ignoreEvent, false);

 

 

Does that help? 

 

  • Like 3

Share this post


Link to post
Share on other sites
On 4/19/2018 at 12:27 AM, GreenSock said:

Yeah, that's kinda by design because multi-touch typically enables other stuff like pinching/zooming. But to get the behavior you're after, why don't you set allowNativeTouchScrolling:false on your Draggable and then add this:

 


function ignoreEvent(e) {
  e.preventDefault();
  e.stopImmediatePropagation();
  if (e.preventManipulation) {
    e.preventManipulation();
  }
  return false;
}
document.addEventListener("touchstart", ignoreEvent, false);
document.addEventListener("pointerdown", ignoreEvent, false);

 

 

Does that help? 

 

Can we upgrade this script to manage pinch/zoom actions without using any libraries like hammer.js?

Share this post


Link to post
Share on other sites
1 hour ago, antresoldo said:

Can we upgrade this script to manage pinch/zoom actions without using any libraries like hammer.js?

 

Not without a lot of work. 

 

@GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js?

http://hammerjs.github.io/

 

hammer.js is an awesome library, but it's really not maintained anymore, so GSAP could fill that void.

  • Like 2

Share this post


Link to post
Share on other sites
6 hours ago, OSUblake said:

 

@GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js?

Maybe at some point, but as you probably know @OSUblake we've got a LOT going on at the moment so this isn't really something we can dig into right now. I can put it on the list of possible additions down the road though. 👍

Share this post


Link to post
Share on other sites
22 minutes ago, GreenSock said:

we've got a LOT going on at the moment so this isn't really something we can dig into right now.

 

Yep, that's exactly why I brought it up. If this post hadn't come up, I was still going to ask. Now is the time to make breaking changes. 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×