Jump to content
GreenSock

justin_hackin

Detecting stillness of a Draggable object (with 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

Hi,

 

Currently I need to find a way to tell if a Draggable item is either being dragged or is being thrown, in other words, I need to be able to find out when the Draggable is not moving.  To accomplish this, I set these parameters of my draggable: 

onDragStart: function(){
   isDragThrowing = true;
}, 
onThrowComplete: function () {
   isDragThrowing = false;
}, 

It works most of the time, however, when I click on the throwable object without dragging, the isDragThrowing does not get back to false, presumably because there is no throwProps tween that happens.  So, I thought, oh, that's easy to fix, I'll just make a isDragging and isThrowing.  However, it doesn't seem to be possible to set an isThrowing variable because there is no onThrowStart property where I could set isThrowing to true.  Does anyone have any hints on how I could solve this problem ?

 

Your feedback is and would be appreciated :)

 

 

 

Link to comment
Share on other sites

Hi,

 

What you could try is attach the ticker event to the velocity tracker in order to check if the Draggable target has any velocity at any time. Then if the velocity is bigger than 0 then the element is being either Dragged or Thrown and if the velocity is 0 is still.

 

You can see something similar in this codepen of the Greensock collection:

See the Pen KJbIy by GreenSock (@GreenSock) on CodePen

 

In your case you can take the ticker event outside the Draggable instance (as a global function) in order to check the element's velocity all the time.

 

Although is a bit rare that you're getting the boolean to change without any dragging, what I mean is that with no dragging the onDragStart callback is never triggered. If you check the codepen you'll see that if you keep the mouse still, the velocity is never tracked because the onDragStart event is not triggered.

 

Perhaps you could fork the codepen and accommodate it to your scenario in order to get a better look.

 

Rodrigo.

Link to comment
Share on other sites

Draggable also has an onClick option that triggers if the drag element moves less than 3 pixels. You could probably just accomplish what you need with this:

onDragStart: function(){
   isDragThrowing = true;
}, 
onClick: function () {
   isDragThrowing = false;
}, 
onThrowComplete: function () {
   isDragThrowing = false;
}
  • Like 2
Link to comment
Share on other sites

rhernando, thanks for the suggestion, that sounds like it would work but not the best for performance.  jamiejefferson, that did the trick with such minimal coding, props for your advice !    

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.
×