Jump to content
Search Community

Accessing Draggable public methods

EngageDevs test
Moderator Tag

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

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

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

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

		e.preventDefault();

	}); 

Any ideas?

 

Thanks,

Will

Link to comment
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
Link to comment
Share on other sites

Thanks, I think I'm getting somewhere:

 

console.log(Draggable.get($odds.scrollbar.grip).maxX);

console.log(Draggable.get($scrollbar.grip).maxX);

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?

Link to comment
Share on other sites

Hi Will,

 

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

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html#update()

 

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,
{
  type:"x",
  bounds: container
});

//then update the instance
myDrag[0].update(true);

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.

 

Rodrigo.

Link to comment
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 :)

 

Thanks,

Will

  • Like 2
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.
×
×
  • Create New...