Multitasking Gestures on Ipads and draggable object

[martis]

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!

[GreenSock]

That is indeed pretty "fringe" It sounds like Apple isn't dispatching the "touchend" events properly when that occurs. Thanks for letting us know, though. 

[sumimasenga]

So there are no way to go around this? Like calling .trigger("touchend") or something like that?

 

 

 

Great work you guys with the whole greensock library I must say!!

[martis]

Good question, I have had a few issues where I change tabs with different draggable objects and i sometimes cannot get interactivity back.

[GreenSock]

You can certainly disable() and then enable() the Draggable instance if you want. Does that help?

[martis]

Thanks, I will look into how to capture the event where you lose/gain focus on a page in iOS, anyone have experience with this?

[sumimasenga]

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

[GreenSock]

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:

Draggable.get("#yourID").disable();

GSAP_1.11.0_rc2.zip

[sumimasenga]

Hi!

 

I tried and it works like a charm! Really appreciate the quick response and for the update!

 

Keep up the awesome work you guys do!

 

Cheers

//Robert

[martis]

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?

[GreenSock]

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