redcrayon

Getting touchAction property to work with pan-x pan-y

Recommended Posts

Hi GSAP,

What is the syntax to have touchAction work on both axis?


Single axis works:
TweenMax.set(element, { touchAction: "pan-x" });

This doesn't work:
TweenMax.set(element, { touchAction: "pan-x pan-y" });

Thanks!

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not really familiar with that property. It might help if you can provide an example of it working without TweenMax.

 

Please try:

 

TweenMax.set(element, { "touch-action": "pan-x pan-y" });

 

and let us know if that works.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Unfortunately, that didn't work. I also tried this as a CSS property which didn't work either.
TweenMax.set(element, { css: { "touch-action": "pan-x pan-y" }});

This post is experiencing the same issues I have at the moment.

If you open this pen on an Android phone / Chrome browser, the first example is the issue I have. Basically, I cannot drag an SVG.

 

After about 5-10px movement in any direction, onRelease is automatically triggered. After applying their solution (touchAction), I was able to successfully drag in one direction but not the other.

Share this post


Link to post
Share on other sites

Thanks Carl!
Sorry for not responding to this sooner. 

I tried the beta version of the draggable and it worked.


Now that has been resolved, I seem to be having trouble with draggable bounds which I guess is a separate issue altogether. Seems to be cutting off on the right side of the window even though I specified the bounds to be "window".

Thanks again!

Share this post


Link to post
Share on other sites

Sorry to hear about the trouble, @redcrayon - do you have a reduced test case that we can take a look at? Please let us know what browser/device too. I'm not aware of any problems with the bounds stuff, but we definitely want to make sure any bugs are squashed promptly. Tough to troubleshoot blind, though.

Share this post


Link to post
Share on other sites

Hi Jack. Thanks for the reply.
Navigate to this site using an Android phone running Chrome.

 

http://engit.eng.unimelb.edu.au

 

Go to the quiz section and drag the items around. It appears the resolution detected by the bounds is scaled down. When you drag any of those answers to the right of the screen or to the bottom, the drag is prevented. I have tinkered with the edgeResistance value which seems to allow dragging beyond the bounds, but the bounds continue to be scaled down.

Here's a snippet of the code. I don't think it's anything unusual.
 

Draggable.create(".answer", {
			bounds: window,
			type: "x,y", 
			dragResistance: 0, 
			edgeResistance: 0.75,
			
			onClick: function(e) {
				e.stopPropagation();	
			},
			onPress: function(e) {
				if(!isMSIE()) {
					TweenMax.to(e.target, 0.3, { autoRound: false, css: { "stroke-width": "3" }});
					var tl = new TimelineMax();
					tl.set(e.target.parentNode.childNodes[0], { autoRound: false, rotation: 20, transformOrigin: "50% 50%" });
					tl.to(e.target.parentNode.childNodes[0], 0.3, { autoRound: false, rotation: -20, transformOrigin: "50% 50%", repeat: -1, yoyo: true, ease: Power1.easeInOut });
					sound_select.play();
				}
				// set blank element to what is pressed
				el = e.target.parentNode;
				// layer current svg on top
				el.parentNode.appendChild(el);
			},
			onRelease: function(e) {
				if(!isMSIE()	) {			
					var obj = document.querySelector(".drop-zone");
					
					TweenMax.to(e.target, 0.3, { autoRound: false, css: { "stroke-width": "1" }});
					TweenMax.killTweensOf(e.target.parentNode.childNodes[0]);
					TweenMax.to(e.target.parentNode.childNodes[0], 0.3, { autoRound: false, rotation: 0, transformOrigin: "50% 50%", ease: Power1.easeInOut });
					
					if(this.hitTest(obj, "50%")) {
						
					} else {
						TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: 0, y: 0, ease: Power2.easeOut });
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
					}
				}
			},
			onDrag: function(e) {
				var obj = document.querySelector(".drop-zone");
				
				// ensure the dragged element is still the original element pressed
				if(e.target.parentNode == el) {
					if(this.hitTest(obj, "40%")) {
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 0 });
						TweenMax.to($(".drop-zone-path"), 0.2, { css: { stroke: "#ffffff" }});
						TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1.05, ease: Power1.easeOut, transformOrigin: "50% 50%" } );
						TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 0.8, transformOrigin: "50% 50%" });
					} else {
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
						TweenMax.to($(".drop-zone-path"), 0.2, { css: { stroke: "#19e68c" }});
						TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" } );
						TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" });
					}
				}
			},
			onDragEnd:function(e) {
				var obj = document.querySelector(".drop-zone");
				var target_class = e.target.attributes['class'].value;
				if(isMSIE()) {
					var target_id = e.srcElement.id;
				} else{
					var target_id = e.target.id;
				}
				var tl = new TimelineMax();
				
				TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" } );
				TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" });
				
				if(e.target.parentNode == el) {
					if(this.hitTest(obj, "50%")) {
						if(target_class == "answer_one") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "75%", y: "-50%", ease: Power2.easeOut });
						} else if (target_class == "answer_two") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "75%", y: "50%", ease: Power2.easeOut });
						} else if (target_class == "answer_three") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "0%", y: "100%", ease: Power2.easeOut });
							if(target_id == 9) {
								sound_tie_fighter.play();
							}
						} else if (target_class == "answer_four") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "-75%", y: "50%", ease: Power2.easeOut });
						} else if (target_class == "answer_five") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "-75%", y: "-50%", ease: Power2.easeOut });
						} else if (target_class == "answer_six") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "0%", y: "-100%", ease: Power2.easeOut });
						}
						
						$(".answer").each(function() {
							if(e.target.parentNode != this) {
								$(this).attr("class", "answer disappear");
							}
						});
						
						sound_answer.play();
						tl.to($(".quiz-restart-group"), 0.2, { alpha: 0 });
						tl.staggerTo($(".disappear"), 0.2, { alpha: 0 }, 0.1, "0.0"); 	// 1.2
						tl.to($("#answer_filter_blur"), 0.5, { attr: { "stdDeviation": 6 }, yoyo: true, repeat: 1 }, "-=0.6" );
						tl.to($(".quiz-drop-zone"), 0.15, { autoRound: false, scale: 1.1, transformOrigin: "50% 50%" }, "-=0.55" );
						tl.to(e.target.parentNode, 0.15, { autoRound: false, scale: 1.1, transformOrigin: "50% 50%" }, "-=0.55" );
						tl.to($(".quiz-drop-zone"), 0.2, { autoRound: false, scale: 0, alpha: 0, transformOrigin: "50% 50%" }, "-=0.4" );
						tl.to(e.target.parentNode, 0.2, { autoRound: false, scale: 0, alpha: 0, transformOrigin: "50% 50%" }, "-=0.4" );
						tl.to($(".quiz-svg"), 0.5, { alpha: 0, delay: 0.5, onComplete: nextQuestion, onCompleteParams:[target_id] });
					}
					else {
						TweenMax.to(e.target.parentNode, 0.5, { x: 0, y: 0, ease: Power2.easeOut });
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
					}
				}
			}
		});

 

Share this post


Link to post
Share on other sites

Dear All,

 

Hello. My name is Alex and I am a newbie in SVG and even coding. I have been reading this forum recently and found it very very useful, people here are so helpful. That's the reason I choose to use GreenSock.

 

I am having a similar problem with redcrayon. When I use the beta version, the drag is ok but cause another function to fail . Also, touch-action is not workable too. 

 

I really like draggable, could you guys please help to fix this issue please?  Thank you so much.

 

Cheers,

Alex

Share this post


Link to post
Share on other sites

Hi redcrayon,

 

Very nice quiz. Unfortunately I had to wait a minute for a video to load before getting to it.

In order for us to help you efficiently and effectively you will need to provide a reduced test case. It just isn't practical for us to debug a live site as complex as yours. We don't need to see half a dozen conditions inside callbacks or elaborate animations on multiple elements or anything like that.

Just a single Draggable element that isn't respecting the proper bounds or firing the proper callbacks, in as simple a manner as possible.

 

We are big fans of CodePen demos. Just fork the demo below, add your own code and send us the link:

 

 

We'll do our best to get to the bottom of the issue.

Share this post


Link to post
Share on other sites

Hi Carl and redcrayon and folks in here,

 

My apologies for jumping in because I really want to know where my problem is. Below i have inserted my codepen. May I ask if you could help to take a quick look?

 

Thank you very much and I really appreciate your help.

 

 

 

Share this post


Link to post
Share on other sites

Hi @Alexli, we'll be more than happy to help you but could I ask you to make a thread for your question? It is a lot better if we have one thread per question otherwise other people can get confused with different conversations going on.

 

Thanks!

Share this post


Link to post
Share on other sites

Good suggestion, @Dipscom

 

@Alexli, there was indeed a bug in the prerelease of Draggable, and I updated it now so things should be resolved (you may need to clear your cache). Does it work better now? (feel free to answer in a new thread that you create). 

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

  • Like 1

Share this post


Link to post
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.