Draggable triggered via element

[Joe Hakooz]

Hi all,

I was wondering if there is a way to move a draggable by clicking another element?

 

I've created a horizontal slider similar to the jQuery Mobile Slider.

There are several "snaps" along the way. I would like to move the draggable to one of these "snaps" by clicking a button. 

 

The problem with simply tweening the draggable...

When dragging, the draggable stays within the bounds (specifically when dragged all the way to the right). I suspect it is auto calculating a negative margin. However when I tween the draggable to the far right, it goes out of the bounds. 

 

I could implement my own negative margin calculation but was hoping there was a built in way to do this. 

 

Thanks for any help!

 

[Rodrigo]

Hi,

 

What you could do is tween a JS object value on UI event, click in this case, and use that tween's onUpdate to pass the value to a Draggable instance simulating a UI slider.

 

This are two samples made with Draggable that update a tween's progress and vice versa:

 

See the Pen Batoc by rhernando (@rhernando) on CodePen

 

See the Pen npBoF by rhernando (@rhernando) on CodePen

 

Another cool sample is the one crafted by Jamie in this post:

 

http://forums.greensock.com/topic/8779-use-draggable-for-scrollingthrow-props-but-not-actually-dragging-something/?view=findpost&p=34852

 

What you could do is that, instead constantly update the value you could update a paused tween by a fix amount, what in JQuery's UI slider is called a step.

 

Also it'll very helpful if you could create a reduced sample in jsfiddle or codepen to take a better look.

 

Rodrigo.

[Joe Hakooz]

Thanks for the quick response Rodrigo. 

I will give these examples a closer look...

 

Joe