Controlling Draggable programmatically

[BowserKingKoopa]

What is the best way to control a Draggable element's scroll position programmatically?  I'd like to be able to explicitly set the draggable's x, y position from code. Setting the draggable's x and y properties doesn't seem to do anything (the docs list them as 'read only'.

See the Pen byuor by anon (@anon) on CodePen

[GreenSock]

There are a few problems:

1. Draggable.create() returns an Array of Draggable instances (remember, you may pass in selector text that'd match many elements, thus a Draggable would have to be created for each one). You were setting/getting the x/y on the Array rather than the Draggable.
2. For performance reasons, Draggable doesn't have two-way binding with the target, so when you alter the x/y on the Draggable, it doesn't automatically set the actual target's x/y to those values.
3. You mentioned "scroll position" but I assume that was a typo, right? Your Draggable is of type:"x,y", not type:"scroll".

The proper way to handle this is to set the x/y on the target of the Draggable itself using TweenLite.set() like:

TweenLite.set(draggable[0].target, {x:100, y:100});

If you want to also force the Draggable's x/y to update so that it reflects your change to the target's x/y, you can either manually call the draggable's update() method, or you could leverage the onUpdate of the tween to do that for you (this is useful if you're actually tweening the target over time):

TweenLite.set(draggable[0].target, {x:100, y:100, onUpdate:draggable[0].update, onUpdateScope:draggable[0]});
console.log(draggable[0].x, draggable[0].y); //100, 100

But that really isn't necessary unless you've got some code that's looking at the Draggable's x/y properties. Those are really meant as an easy reporting tool, like during dragging. Kinda like an alias for the target's true x/y. 

 

Also note that if you want to programmatically set the scroll position of a type:"scroll", you'd need to tap into the special scrollProxy object that Draggable creates which is what handles all the overscolling calculations. So yourDraggable.scrollProxy.scrollTop(100) would set the top scroll position to 100, and yourDraggable.scrollProxy.scrollLeft(100) would set the scrollLeft accordingly. 

[BowserKingKoopa]

This is working perfect for me. Thank you.  However, it seems to be working without me having to call update(). When is calling update necessary?

 

Updated codepen:

[GreenSock]

You only need to call update() if you want the Draggable instance itself to update its x/y properties. For example, if you add console.log(draggables[0].x); to your codepen at the very end, you'll see that it still reports x as 0. If you call update(), it'll be 100. But that has nothing to do with actually moving the target - it's just a raw property value on the Draggable.