Can I access draggable methods?

[jesper.landberg]

I'm trying to call a Draggable.onDrag() inside a mousewheel handler like so:

 

      let Slider = Draggable.create(document.createElement('div'), {
        type: "x",
        throwProps: true,
        trigger: wrapper,
        onDrag: updateProgressReverse,
        onThrowUpdate: updateProgressReverse
      })

      Hamster(wrapper).wheel((event, delta, deltaX, deltaY) => {
        Slider.onDrag()
      })

But I get the error 'Slider.onDrag is not a function. Is it possible to access Draggable props and methods "outside"?

 

 

[Sahil]

The Draggable constructor is different than usual draggable that we define. Following is the syntax for defining Draggable using constructor

 

var draggableInstance = new Draggable(singleTarget,{});

 

When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor. Using that instance you can access it's properties and methods.

 

You can define draggable normally and access it's properties and methods of draggable as follows

 

Draggable.get(domElement).x;

 

I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.

 

[jesper.landberg]

Just now, Sahil said:

The Draggable constructor is different than usual draggable that we define.

 

var draggableInstance = new Draggable(singleTarget,{});

 

When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor.

 

You can define draggable normally and access it's properties and methods of draggable as follows

 

Draggable.get(domElement).x;

 

I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.

 

Hi. I see.

I am trying to trigger onDrag on mousewheel scroll, to get the same effect I get when dragging . Here is some more of my code:

     

let animation = TweenMax.to('.slide', 1, {
        x: "+=" + wrapWidth1,
        ease: Linear.easeNone,
        paused: true,
        repeat: -1,
        modifiers: {
          x: function(x, target) {
            x = x % wrapWidth1;
            return x;
          }
        }
      })

      let Slider = Draggable.create(document.createElement('div'), {
        type: "x",
        throwProps: true,
        trigger: wrapper,
        onDrag: updateProgress,
        onThrowUpdate: updateProgress
      })

      function updateProgress() {
        animation.progress(this.x / wrapWidth1 * speed)
      }

      Hamster(wrapper).wheel(function(event, delta, deltaX, deltaY) {
        Slider.onDrag()
      })

 

 

The code creates a draggable infinite/loop. Courtesy of @OSUblake.

[Sahil]

Can you reference his codepen demo/thread?

 

If possible also post demo of what you are working on.

[jesper.landberg]

Just now, Sahil said:

Can you reference his codepen demo/thread?

 

If possible also post demo of what you are working on.

Here is his

See the Pen ee107aeb54bdf4dca1084715d86b5e9c?editors=0010 by osublake (@osublake) on CodePen.

. And that is basically what I have done, except I don't use snap points and I don't use jQuery. What I would want to do is move the slider on mouseWheel to complement the dragging. Any idea how this could be achieved?

[OSUblake]

Unless I'm making a simple demo to help somebody out, I always use the constructor. 

 

// meh
let Slider = Draggable.create(someElement)[0]

// I like this
let Slider = new Draggable(someElement);

 

Once you have an instance, you can call its methods.

 

updateProgress.call(Slider)

 

 

[OSUblake]

BTW, the callbacks are on the vars object you pass in, so to call the "onDrag" function like that, it would be like this.

Slider.vars.onDrag.call(Slider)

 

[OSUblake]

Or skip .call() altogether...

let Slider = new Draggable(someElement);

// If you use the instance instead 'this', you won't have to worry about scope
function updateProgress() {
  animation.progress(Slider.x / wrapWidth1 * speed)
}

updateProgress(); // ok

 

[OSUblake]

19 minutes ago, jesper.landberg said:

Here is his Pen. And that is basically what I have done, except I don't use snap points and I don't use jQuery. What I would want to do is move the slider on mouseWheel to complement the dragging. Any idea how this could be achieved?

 

Here's a similar, but better version of that demo I was helping @Sahil with.

 

See the Pen veyxyQ?editors=0010 by osublake (@osublake) on CodePen.

 

 

You should be able to use your mouse wheel delta to hook in to changing the progress somewhere in there. 

[Sahil]

 

 

See the Pen aVvMde?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

[jesper.landberg]

Just now, Sahil said:

 

 

See the Pen aVvMde?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

Amazing, thanks a lot both of u @OSUblake and @Sahil !!

[OSUblake]

18 minutes ago, Sahil said:

 

 

See the Pen aVvMde?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

 

 

Just add event.preventDefault() so it doesn't scroll the page.

[jesper.landberg]

1 hour ago, OSUblake said:

 

 

Just add event.preventDefault() so it doesn't scroll the page.

I stripped down @OSUblake 's example to my use case.. still having problem figuring out how to make it work on scroll. Dunno what to place inside my mousewheel handler=/ Any tips?

 Pen: 

See the Pen GOpLYe by ReGGae (@ReGGae) on CodePen.

 

[Sahil]

What is Hamster?

 

Here  is the stackoverflow thread that talks about mousewheel events.

[jesper.landberg]

Just now, Sahil said:

What is Hamster?

 

Here  is the stackoverflow thread that talks about mousewheel events.

Well it's basically a vanilla js jquery mousewheel equivalent. http://monospaced.github.io/hamster.js/

[Sahil]

Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.

[jesper.landberg]

Just now, Sahil said:

Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.

The demo is nice, however I'm not using snapping, what I want is to move the slider when I scroll in the same way it does when I drag it.  Continuous movement. "drag the slider with mousewheel" or how to say:P

[Sahil]

Got it, let me give it a try otherwise Blake will resolve it.

[jesper.landberg]

Just now, Sahil said:

Got it, let me give it a try otherwise Blake will resolve it.

I'm very thankful for your help!

[Sahil]

Here is how you can do it.

 

TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen.

 

@GreenSock Didn't know tweens can be used like this, amazing.

[jesper.landberg]

Just now, Sahil said:

Here is how you can do it.

 

TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen.

 

Woho awesome! thanks a lot!

[jesper.landberg]

8 minutes ago, Sahil said:

Here is how you can do it.

 

TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen.

Just one thing I'm noticing, when u scroll and then drag before the scroll animaton is done, it often "jumps". Any idea how to prevent this?

[Sahil]

I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.

[jesper.landberg]

7 hours ago, Sahil said:

I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.

@OSUblake got any idea on how this might be fixed?

[Sahil]

You are in tough luck, he probably won't be online until Monday/Tuesday. @GreenSock might suggest something, otherwise I will try something tomorrow but can't guarantee it will work.