Jump to content
Search Community

Multi-touch breaks Draggable

matt.schuh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

Link to comment
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
Link to comment
Share on other sites

  • 1 year later...
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?

Link to comment
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 4
Link to comment
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. ?

Link to comment
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 3
Link to comment
Share on other sites

  • 2 months later...
53 minutes ago, GreenSock said:

I'm not terribly familiar with Hammer.js - we have no plans to duplicate all its functionality, but is there something in particular you want to request? 

I use Draggable and Throwprops on zoomed images in order to scroll them (closup of a product for instance). I'd like to be able to zoom in/out with multi touch devices.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...