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

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 });
					}
				}
			}
		});

 

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

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!

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

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.

See the Pen b22b091009ecab25ea5ca190d3f54496 by osublake (@osublake) on CodePen

 

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.

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

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!