Jump to content
GreenSock

redon77

end-position with draggable and throwprops

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello

i'm working with Draggable and the ThrowPropsPlugin - they are fantastic!

 

However I have a problem.

How can I get the final x, y position of the dragged object?

 

When dragEnd is outside the boundery, ThrowProps will move the object back inside the boundery (very nice!) but where does it stopp?

 

I'm working on a kind of mouse-follower, where one object follows the draggable one.

 

 

Link to comment
Share on other sites

Great question.

 

You can define an onComplete callback for each Draggable instance which will then be used by the ThrowProps tween. Same thing goes for onUpdate.

 

Take a look at this codepen which shows the x/y of the dragged object while being dragged and thrown

 

http://codepen.io/GreenSock/pen/42effab5f643e677919315af7e37a021

  • Like 2
Link to comment
Share on other sites

Hi Carl,
 
Looking at the codepen it strikes me that the draggable instance works the exact way that every constructor in the engine and can have the usual callbacks attached to it.
 
Just yesterday I was doing that but through a custom ThrowPropsPulgin with an onUpdate call inside:

onDragEnd:function()
{
  ThrowPropsPlugin.to(this.target,
  {
    throwProps:
    {
      resistance:3000,
      top:
      {
	velocity:'auto',
	min:this.yMin,
	max:this.yMax
      },
      left:
      {
	velocity:'auto',
	min:this.xMin,
	max:this.xMax
      }
    },
    onUpdate:function(){console.log($(this.target).css('top') + ' :: ' + $(this.target).css('left'))}
  }, .25);//throw props instance end
}//dragg end callback end*/

I should've asked here first  :P

 

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hey Rodrigo,

 

Ha, it was just yesterday that I was advising someone to create a custom ThrowProps tween with an onUpdate callback applied. Then I learned about the secret onUpdate and onComplete callbacks for Draggable from Jack;) 

 

They will make there way into the docs shortly. 

 

Thanks so much for all your help around here.

 

-Carl

  • Like 1
Link to comment
Share on other sites

FYI, you'll probably want to check out the new version of Draggable - I just posted a preview of 0.8.1 here: http://forums.greensock.com/topic/8056-draggable-invert-bounds-behavior/#entry31763

 

There are new "endX" and "endY" properties that should make you happy :)

 

Plus a bunch of other enhancements. And notice that onComplete and onUpdate are now onThrowComplete and onThrowUpdate.

  • Thanks 1
Link to comment
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.
×