Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
PawleyBoboli

Android alters start position of Draggables

Recommended Posts

Hi Folks,

 

I am not sure this is a GSAP issue, but it is only happening to draggable elements in my project.  I apologize if I missed something obvious, but I've hit a dead-end.

 

My project uses draggable buttons of various sizes in a graphical test environment.  This project has been running fine for a year but now it is giving me trouble only on my Android Nexus 7 test tablet.  Everything works great on iPad and all modern desktop browsers in Mac & Windows.

 

Take a look at the two images I have attached.  The "draggable_sample_correct.jpg" image shows what the 3 draggable buttons should look like.  The "draggable_sample_Android-bogus.jpg" image shows what it looks like on my Android device.  I noticed that the transform: translate3d style is altered.  I can't figure out where this transform is coming from in the first place, and why it's different on Android in the second place!

 

post-15545-0-57369600-1436565406_thumb.jpgpost-15545-0-17392500-1436565405_thumb.jpg

 

The dragging behavior is inconsistent as well.  On Android, when I drag one of the buttons onto a target and let go, it sometimes goes to its correct home position... at other times, it goes to a new incorrect position.

 

Here is my setup and onDrop functions, which have not been touched for a year.  This used to work on this same test tablet, but now I'm wondering if some update to Android has caused the problem?

var setupDroppables = function(theDropClass) {
            // DRAG N DROP
            var droppables  		= $(theDropClass);        	
            var overlapThreshold 	= "50%"; 
            var targetContainerDiv 	= "#singleVtarget";
            
            switch (theDropClass) {
                // There are several styles of drag & drop question layouts.
                case ".threexDnDsideBySide":
                    targetContainerDiv = "#threeUpVtargets";
                    break;
                case ".twoxDnDsideBySide":
                    targetContainerDiv = "#twoUpVtargets";
                    break;
                case ".blueDnD":
                    targetContainerDiv = "#singleVtarget";
                    break;
                case ".twoxDnDstacked":
                    targetContainerDiv = "#singleVtarget";
                    break;
                case ".threexDnDstacked":
                    targetContainerDiv = "#singleVtarget";
                    break;
                case ".scenarioSel":
                    targetContainerDiv = "#singleVtarget";
                    break;
            }
            
            Draggable.create(droppables, {
                bounds:window,
                onPress:function() { 
                	TweenLite.set(targetContainerDiv, {autoAlpha: 1, display: "block"});
                },
                onDrag: function(e) {
                    var i = targetArray.length;
                    while (--i > -1) {
                        if (this.hitTest($(targetArray[i]), overlapThreshold)) {
                            console.log("we're on it!");
                            $(targetArray[i]).addClass("highlight");
                        } else {
                            $(targetArray[i]).removeClass("highlight");
                        }
                    }
                },
                onRelease:function(e) {
                    var i = targetArray.length;
                    while (--i > -1) {
                        if (this.hitTest(targetArray[i], overlapThreshold)) {
                          	onDrop(this.target.id, targetArray[i]);
		                    TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut});
                          	$EV_SoundManager.playSFX("throb018");
		                    return;
                        }
                    }
                    $EV_SoundManager.playSFX("throb018");
                    TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut});
                }
            });
        };




 // FLASH THE BORDER IF THE CORRECT DROP
        var onDrop = function (dragged, dropped) {
            var thisSelection   = dragged;
            var thisPos         = targetArray.indexOf(dropped);
            var correctChoice   = correctChoices[thisPos];
            var thisIndex       = buttonArray.indexOf("#" + thisSelection);
            
            if (thisSelection == correctChoice) {
                isCorrect = true;
                if (jQuery.inArray( thisSelection, correctQuestions ) == -1 ) {
                    correctQuestions.push(thisSelection);
                }
                animateMsg(questionArrayRandom[currentQuestionIndex], correctStatements[thisIndex]);
                TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true});
            } else {
                isCorrect = false;
                incrementAttempts();
                
                animateMsg(questionArrayRandom[currentQuestionIndex], incorrectStatements[thisIndex]);
                hideTargetVContainerDivs();
                $(dropped).removeClass("highlight");
            }
        };

Any insight or leads for solving this are greatly appreciated.  Thanks!

 

--Kevin

Link to post
Share on other sites

Hi PawleyBoboli :)

 

pls provide a reduced Codepen Demo to help finding the root of that issue .

Link to post
Share on other sites

Checking the older version of this course on a Blackboard server showed no issues with these drag n drop activities.  After trying many things that didn't work, I noticed the older project was using an older version of GSAP:   TweenMax v 1.13.1 and Draggable v 0.10.5 both dated 2014-07-17.  My current version of the project is using the latest GSAP of TweenMax v 1.16.1 and Draggable v 0.13.0  both dated 2015-03-13.

 

My problem went away when I switched back to the older version (I switched the whole GSAP package back).  I have no idea why this worked, but I will try to create a codepen this weekend with the latest GSAP and see if it exhibits the problem.

 

... keep you posted.

Kevin

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×