Jump to content
Search Community

Draggable is initializing but not actually draggable

rag test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

I've been using the Draggable for years without problems but today I can't seem to get it to work.. I made an extremely reduced test repo here:

https://github.com/buesing/gsap-draggable-demo

Initialization code is in https://github.com/buesing/gsap-draggable-demo/blob/master/src/App.js

There's basically nothing there but a barebones draggable initialization. It seems to work, I'm even getting the move cursor when hovering over the red div, but it's just not draggable. Could somebody take a look at this? I've been searching for hours for possible causes, can't seem to find anything. Also tried downgrading to 1.x, no changes. Probably just missing a stupid detail.

 

Run the test repo with: 

npm install

npm start

Link to comment
Share on other sites

Hi,

 

You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable.

 

Just add dragClickables: true in your Draggable instance and it will work:

 

export default class App extends React.Component {
  componentDidMount() {
    this.draggable = new Draggable(this.draggableRef, {
      type: "x,y",
      dragClickables: True
    });
  }

  render() {
    return (
      <div
        ref={ref => {this.draggableRef = ref;}}
        style={{width: 100, height: 100, background: "#f00"}}
      />
    );
  }
}

 

Another alternative is roll-back to React 16.4.2

 

For more details and information about this issue, please refer to this post:

 

 

And this issue in React's repo:

 

https://github.com/facebook/react/issues/13654

 

The next release of GSAP will have this fixed.

 

Happy Tweening!!!

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