Jump to content
Search Community

Multitasking Gestures on Ipads and draggable object

martis 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

Hey Jack,


Just discovered a pretty fringe case, but it breaks draggable objects on iPad


On the iPad you can perform "4 or 5 finger gestures" on Apps (Safari)


-Pinch to Home Screen

-Swipe up to reveal multitasking bar

-Swipe left or right between apps


After you perform any of these actions and come back to the webpage with the draggable object on it, it somehow loses all interactivity (you no longer can interact with the draggable object).


Not sure how you would even approach this bug, but wanted to bring it to your attention. Thanks again for all the awesome work on Draggable!

Link to comment
Share on other sites

Hello again!


Try that and it didnt work....


I have investigated a little and the effect happens even when a alert(); shows when calling the onDragStart event. Like this:


Draggable.create('.hit', { type:'x', onDragStart:function(){ alert("!"); }});
After that alert, no button is working that is a Draggable object.
So I tried to see if safari is capturing some kind of event when the user does Multitasking Gestures outside the safari browser. And It does, the touchcancel event  :)
So running this code will scream "Touch Cancel"
Draggable.create('.hit', { type:'x', onDragStart:function(){ alert("!"); }});
$('.hit').on('touchcancel', function(e){
    alert("Touch Cancel");
So, there are two options here.
1. That Draggable will call the same function for the "touchend" event when "touchcancel" happens. Is this possible?
2. In my code above when the "touchcancel" event happens. Somehow remove the Draggable object of ".hit". Like reseting. and create the instance again. Cant find any function on removing the Draggable object. Any suggestions?
And yes I tried invoking the $('.hit').trigger("touchend"); Didnt work...
Link to comment
Share on other sites

Thanks for letting us know about your findings. Would you mind testing the attached updated version of Draggable? It listens for the touchcancel event. Make sure you're using the rest of the updated core classes too, as there have been changes to CSSPlugin that affect things. 


And by the way, you can disable() a Draggable instance (you asked about "removing" the Draggable object). Like:



Link to comment
Share on other sites

I tried the multitasking gestures on my site and it seemed to fix it!


Not a huge deal, but I did notice that if you tab off a site with draggable (ipad), and tab back onto the site with draggable it takes a second or two for the draggable instance to pick up interactivity. I wonder what the cause of this is?

Link to comment
Share on other sites

Glad to hear it's working. I'm not sure what might be causing the delay, but there's nothing inside Draggable that'd do that (at least not that I can think of - there are no timeouts or anything like that). It sounds like it's just the browser that needs a second or two to get things rendered and ready to go interactivity-wise (just a guess). 

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