Draggable- Bounds and last rotation info

[ErinD 0 Likes (Newbie)]

Hello,
 
I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied?
 
Thanks,
 
ErinD
 
 

function init()
{
	console.log("yeash!!!!");
	needleImg= document.getElementById("bNeedle");
	barometerImg=document.getElementById("barometer");
	smallForm=document.getElementById("groupThis");
	//console.log(needleImg);

	TweenMax.to(needleImg, 3, {css:{rotation:145, transformOrigin:"193px 47px"},ease:Elastic.easeOut});

	Draggable.create(needleImg, 
	{
        type:"rotation",
        throwProps:true,
        onDragEnd:function() { console.log(this.rotation);},
        bounds:{minRotation:0, maxRotation:90}
    }); 
}

Edited December 26, 2013 by ErinD

[Rodrigo 5,087 Likes (Superhero)]

Hi,

 

Mhh I'm not sure what could be wrong your code seems ok to me, at least the part you posted.

 

Anyway I've created a very simple codepen with a very old-fashion needle, feel free to fork it and accommodate it to your scenario:

 

See the Pen nhfgv by rhernando (@rhernando) on CodePen

 

Rodrigo

[GreenSock 18,267 Likes (Superhero)]

I bet you're just using a stale version of Draggable (before it had those features). Please make sure you're using the latest version (that goes for all the GreenSock files)

[ErinD 0 Likes (Newbie)]

Yes! That did it, Jack. Didn't realize I was running an older copy. Thanks to both of you for your help!

 

Happy Holidays,

 

ErinD