Jump to content
GreenSock

trych

Keep draggable item with changing dimensions within bounds

Go to solution Solved by Cassie,

Recommended Posts

Hi there!

I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds).

The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position.

How can I change my setup to make sure that the slider stays within the bounds at all times?

Thanks!

See the Pen wvrgegQ?editors=1111 by trych (@trych) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @trych,

 

I'm not super hot on Draggable, but I checked the docs and there's an update method.

https://greensock.com/docs/v3/Plugins/Draggable/update()


Thumb is an array which I wasn't expecting so I've had to get the first instance with thumb[0] - maybe there's a better way of getting that. But it seems to be working!

See the Pen oNGBoWe?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Oh wow, such a simple fix. Thanks a lot, works really well.
Also, I noticed, when the Draggable instance is create via `new Draggable()` instead of `Draggable.create()`, you do not get an array, so I just used this instead now. Thanks again!

  • Like 1
Link to comment
Share on other sites

3 hours ago, Cassie said:

Thumb is an array which I wasn't expecting so I've had to get the first instance with thumb[0]

 

When I'm creating a single Draggable, I like to use new instead of create. That will return the instance instead of an array.

const thumb = new Draggable(".thumb", {
  ...
})

 

But you really don't need that in this case. Just use this.

 

this.update( {applyBounds:true} )

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, OSUblake said:

Just use this.

Good point. Will keep this in mind.

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