Jump to content
GreenSock

BowserKingKoopa

Multi-touch doesn't work in Draggable

Recommended Posts

As mentioned in this old post: 

Pinch Zoom doesn't work inside Draggable. I'm using Draggable to scroll large full screen images around but this breaks Pinch Zoom on touch devices. On iPhone, for example, this feels completely broken. Has anyone found a solution for this?

 

-R

Link to comment
Share on other sites

Did you see this response?
 

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

 

Link to comment
Share on other sites

1 hour ago, Cassie said:

Did you see this response?
 

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

 

The original post was a little different. I was referring to later messages in the post talking about getting multitouch things like pinch/zoom to actually work. It's been four years since that post and I was wondering if any progress has been made on that front or if a solution has come up. On one hand Draggable is described as "Works great on tablets, phones, and desktop browsers" which isn't really true when something as integral to the iPhone (for example) experience as pinch/zoom doesn't work. On the other hand maybe my use case is unusual and Draggable being used for large or full screen images isn't the intended use? Maybe it's for dragging tiny elements around? If you're dragging tiny elements around you might not notice that a particular pinch/zoom gesture didn't work. But when you're dragging full screen images around it feels like your phone is broken. I know they don't work and I still instinctively pinch/zoom. 

 

-R

Link to comment
Share on other sites

Oh ok so you're not saying 'I can't pinch zoom a webpage while using draggable?' you're saying 'why can I not pinch zoom in on an element?'

 

In that case it's not that it doesn't work, it's just that it's not a feature in the first place - Draggable does 'work great on tablets phones and desktop browsers', if what you're doing is dragging. It's a plugin for drag events not for multi-touch.

If you want to scale an element when you pinch zoom you'll need to listen to multi-touch events. e.g. https://hammerjs.github.io

Link to comment
Share on other sites

You can use hammer.js to listen for events and then GSAP to animate. Maybe someone will jump in to help!

Link to comment
Share on other sites

Even if I could get that to work I'm reluctant to try and replace iPhones perfect pinch/zoom with a fake JavaScript solution. I want the phone/browser to just work normally even if there happens to be a Draggable under your fingers. Draggable is preventing the pinch/zoom from happening (I believe that must be the case right? Draggable is the thing preventing the pinch/zoom). Why can't it just not do that? 

 

-R

Link to comment
Share on other sites

"Oh ok so you're not saying 'I can't pinch zoom a webpage while using draggable?' you're saying 'why can I not pinch zoom in on an element?'"

 

I think what I'm saying is much closer to the first thing than the second thing. Draggable is preventing pinch/zoom from working. True it's only when my fingers are on a Draggable. But when Draggables are full screen (which I believe is a valid use case for Draggable and is featured in the demos) your fingers are always on a Draggable. Besides, users don't know what a Draggable is, they just know that your website makes their phone feel broken.

 

"In that case it's not that it doesn't work, it's just that it's not a feature in the first place"

I'm not asking Draggable to do pinch/zoom. I'm asking Draggable to stop interfering with the phone's native pinch/zoom. "It's a plugin for drag events not for multi-touch." Agreed, so don't break my pinch/zoom.

 

-R

Link to comment
Share on other sites

Ah ok I got you. I wasn't aware that was an issue. Looks like this thread covers in in more detail, but I'll leave it to @GreenSock to let you know if there's been any changes that make it possible
 

 

Demo link to make it a little easier to comprehend/test

https://cdpn.io/pen/debug/gOeJExJ

Link to comment
Share on other sites

As far as I know, it's actually impossible to accommodate. In order to make something draggable, we must call .preventDefault() on the touchstart and touchmove events (so the browser doesn't do stuff like start drag-scrolling, etc.) but once you do that, the browser refuses to recognize another simultaneous touch as a gesture. Even if we sense when there are 2 fingers on the screen and stop calling .preventDefault() thereafter, it doesn't matter. As long as there's even one .preventDefault() called on a touchstart or touchmove event after a finger is on the screen, you're hosed. No pinch-zooming or other gestures. 

 

If you know of some way around that, I'd love to hear about it. 

 

I did make the next release of Draggable simply STOP everything once another finger is on the screen which doesn't really help in your case other than to make it avoid jumping around. A preview of that release is at https://assets.codepen.io/16327/Draggable3.min.js

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.
×