Jump to content
Search Community

Applying bounds and snap to Draggable in v3

Rick May test
Moderator Tag

Recommended Posts

While switching a project over to v3, I bumped into an issue that I wasn't experiencing in v2.  I'm having trouble wrapping my head around how I can get the same behavior with the new GSAP.  Here is what I was doing in 2.x:   

 

1) Create a draggable that would call a function in the "onPress".

2) That function would simply update the bounds and change the snap.  The reason I did it this way was to re-apply snap/bounds in the onPress based on values  changing as the user interacts with the site.  I'm sure there is a better way, but this was what I could quickly come up with in my limited Draggable experience.  I'm all ears for a better approach that works with v3.

 


this.draggableObj[0] = Draggable.create(this.screen[0], {
  type: 'y',
  snap: {y:0},
  onPress: this.draggable__onPress,
});


draggable__onPress() {
	const someValue = 10;
  	const anotherValue = -10;
  	this.draggableObj[0].vars.snap.y = [0, someValue];
	this.draggableObj[0].applyBounds({ minY: anotherValue, maxY: 0 });
}

 

This is causing errors while using with v3 ("Uncaught TypeError: Cannot read property 'snap' of undefined") and ("Uncaught TypeError: this.draggableScreen[0].applyBounds is not a function").   Any direction on how I can make this work?  

 

Thanks

Rick

 

 

 

Link to comment
Share on other sites

I can't say much about your snapping issue without seeing a demo, but your errors are probably related to scope. This is better.

 

this.draggableObj = new Draggable(this.screen[0], {
  type: 'y',
  snap: {y:0},
  onPress: this.draggable__onPress,
  callbackScope: this
});


draggable__onPress() {
	const someValue = 10;
  	const anotherValue = -10;
  	this.draggableObj.vars.snap.y = [0, someValue];
	this.draggableObj.applyBounds({ minY: anotherValue, maxY: 0 });
}

 

  • Like 3
Link to comment
Share on other sites

Thanks guys.  After trying to make a reduced example, I decided to write it as a functional component instead of a class.  It is now working as a functional.  I haven't had a chance to figure out what the reason is.  When I find time, I'm going to re-write my project's component (with the draggable) as a functional to try and sort out what is going on.  I'll be back once I've figured it out.

 

Thanks again,

Rick

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
29 minutes ago, st3f said:

I have exactly the same problem.

 

I never did get it working when my component was a class and never investigated further (where it was working fine in v2.x) since ultimately I'd rather use a functional anyway.  

 

Are you using a class?

 

Rick

 

 

Link to comment
Share on other sites

10 hours ago, st3f said:

Yes. And it was working in v2 for us too. I'm in charge of doing some experiments but I'm a bad coder :) .

I'm very curious about code that was working in v2 but not in v3. @OSUblake was totally right about scope being the problem in that first sample code, but that would have the same problem in v2 so that's why I would love to see a demo. It's just super difficult to troubleshoot blind. 

 

@st3f what are the exact errors you're encountering? 

Link to comment
Share on other sites

@GreenSock, it's really impossible to show a "demo" extrapolated from a demi/big app. it takes a lot of time and, in the same time, I'm working with deadlines etc.

En bref, it could be very nice to tell Draggable who is the class that instantiated it (when you are using classes for almost everything).

It's two days I'm using my free time (aka night) trying to copy some "whatever classes" on codepen but I don't understand the emulator and I have no time to study.

Later today I will try to post an example. Bonne journée a tous :)

Link to comment
Share on other sites

But they aren't the same. I fixed the errors in yours.

 

// Mine
constructor(data){
  this.id = data.id;
  this.width = data.width;
  this.height = data.height;

  this.container = $('<div id="container'+ this.id +'" class="font-barlow-semi">'+ this.id +'</div>');
  this.container.css({'width':this.width, 'height':this.height,'background':'rgba(0,0,0,0.3)'});

}

// Yours
constructor(data){
  this.id = data.id;
  this.width = data.width;
  this.height = data.height;

  this.container = $('<div id="container'+ this.id +'" class="font-barlow-semi">'+ this.id +'</div>');
  this.container.css({'width':this.width, 'height':this.height,'background':'rgba(0,0,0,0.3)';
    });
}

 

Remove that semicolon.

 

1859393545_Annotation2019-11-27053910.png.dfd4458b4d906732848f441d2bf74d3e.png

 

 

 

  • Like 3
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...