Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Accessing Draggable public methods

Recommended Posts

Hi All,


I could do with some help!


I'm using the draggable plugin to build a custom scrollbar for a horizontally scrolling element. It works great when dragging the scrollbar, but I also need to update the scrollbar if they scroll using a mouse or swipe with a finger.


I'm attempting to access a few variables stored within the draggable instance, but I'm always returned undefined.


Here's a simplified version of my code:

var scrollbar = Draggable
		.create($scrollbar.grip, {
			type: 'x',
			bounds: $scrollbar.track,
			cursor: 'ew-resize',
			onDrag: scrollContent,
			onThrowUpdate: scrollContent

This is where I'm getting lost. If I access scrollbar I can see some information stored, but not the three bits I need:

  • max x
  • min x
  • current x

(I can work all these values out myself, but as the work has already been done, and I just don't know how to access it, I'd rather not duplicate it and instead learn the right way.)

	.on('mousewheel', function(e){

		$content[0].scrollLeft += e.deltaX;

		console.log(scrollbar.maxX); // This is undefined



Any ideas?




Share this post

Link to post
Share on other sites

Per the API, Draggable.create returns an array of Draggable instances (since the target of Draggable.create could be multiple DOM elements). If you know that you only fed it one DOM element, then

var scrollbar = Draggable.create(...)[0];
should be enough to get you started with scrollbar.x, scrollbar.minX, and scrollbar.maxX.
  • Like 3

Share this post

Link to post
Share on other sites

Thanks, I think I'm getting somewhere:




This returns a value, which is spot on, however, it only returns that value once the draggable instance has been interacted with for the first time. Is there a way to force these values to exist as soon as Draggable has been applied?

Share this post

Link to post
Share on other sites

Hi Will,


What you could try is the update() method in order to pass the values to the Draggable instance:




Keep in mind that, in order to force the boundaries in the update method you have to pass a boolean in the method:

// create the Draggable instance
var myDrag = Draggable.create(target,
  bounds: container

//then update the instance

All you have to do is call the method after the instance has been created. Although is quite a bit odd that Draggable won't return those values. Could you create a simple codepen demo that illustrates the issue?.


Finally please check that you're using the latest version of GSAP and Draggable.



Share this post

Link to post
Share on other sites

Hi Rodrigo,


I'll see if I have time to put together a demo later today.


Using update is half working though. Those values are now returned, but until I have interacted with the draggable element they are all set to 0.


My bad! At some point while attempting to get everything working, I had placed the code which scales the scrollbar grip after Draggable was applied so it essentially had a width of 0. I still need to use .update(true) though, so thanks for that :)




  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.