Draggable scope: argh!

[st3f]

Hi guys, a very weak coder here, I know, so please help...

I have a class creating/handling controls for a html5 video object. I copied somewhere here the draggable code for the scrubber and it works fine when in global javascript, but now... I have, clearly, a conflict of "this"s.

 

// a method of my class
setDraggable(){
  		this.offsetLeft = $('.scrubber').offset().left;
        this.scrubberWidth = this.screenWidth;
        TweenLite.set(".progress", {scaleX:0, transformOrigin:"left"});

        this.draggableElem = $('.vidcontrols-cursor')
  
  Draggable.create(this.draggableElem, {
        type:"x",
        trigger:".scrubber",
        bounds:".scrubber",
        
        onPress:function(e) {
            TweenLite.set(this.target, {x:this.pointerX - this.offsetLeft/* offsetLeft: a class' property...*/});
            this.update();
            updateProgressBarScale(this); // A class' method :(
        },
        onDrag:function() {
            // stuff here

        },
        onDragEnd:function(){
            // stuff here
        }
        });
}

 

It's hours I'm trying to address my class' methods from inside Draggable (using onDragScope, for example) but that's something I can't figure out.

 

Thank in advance

 

[OSUblake]

Didn't you have a similar issue? 

 

 

Learn to use arrow functions. Very important if you want to keep your code to a minimum.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

You're mixing a bunch of stuff up. I'm assuming the draggableElem is just a single element.

 

setDraggable(){
  this.offsetLeft = $('.scrubber').offset().left;
  this.scrubberWidth = this.screenWidth;
  TweenLite.set(".progress", {scaleX:0, transformOrigin:"left"});
  
  this.draggableElem = $('.vidcontrols-cursor')
  
  this.draggable = new Draggable(this.draggableElem, {
        type:"x",
        trigger:".scrubber",
        bounds:".scrubber",
        
        onPress: () => {
          
            TweenLite.set(this.draggable.target, {x:this.draggable.pointerX - this.offsetLeft/* offsetLeft: a class' property...*/});
            this.draggable.update();
          
          	// why are you passing in this? We know what this is.
            this.updateProgressBarScale(this);
        },
        onDrag: () => {
            // stuff here

        },
        onDragEnd:() => {
            // stuff here
        }
      });
}

 

df

[st3f]

Yes I did... and, yes, " draggableElem is just a single element ".

 

you are very, very kind, @OSUblake

you saved my working sunday Thanks a lot