dragClickables: true doesn't work

[Ilima 3 Likes (Newbie)]

I'm trying to use Draggable with React and I don't seem to make it work. Currently I have this code and the version of react:

 

 

"dependencies": {
	"gsap": "^3.5.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-gsap": "^2.2.1",
}

 

Update:

Here is the link to code: https://codesandbox.io/s/gallant-morning-2ggfm

 

 

 

[OSUblake 18,497 Likes (Superhero)]

Please make a demo on codesandbox.

https://codesandbox.io/

 

This is not needed. 

import { gsap, TimelineLite, TimelineMax, TweenMax, CSSPlugin } from "gsap";

 

https://greensock.com/docs/v3/Installation?checked=core,draggable#esModules

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

 

This is incorrect. this.dial is null.

this.dialPos = TweenMax.set(this.dial, {
  x: "+=0",
});

 

Should be gsap.set(), but only after mounted.

 

[Ilima 3 Likes (Newbie)]

34 minutes ago, OSUblake said:

Please make a demo on codesandbox.

https://codesandbox.io/

 

This is not needed. 

import { gsap, TimelineLite, TimelineMax, TweenMax, CSSPlugin } from "gsap";

 

https://greensock.com/docs/v3/Installation?checked=core,draggable#esModules

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

 

This is incorrect. this.dial is null.

this.dialPos = TweenMax.set(this.dial, {
  x: "+=0",
});

 

Should be gsap.set(), but only after mounted.

 

Sorry about the mess. Updated it and here is the link https://codesandbox.io/s/bold-ishizaka-6st9k?file=/src/drag.jsx

[OSUblake 18,497 Likes (Superhero)]

1 minute ago, Ilima said:

Sorry about the mess. Updated it and here is the link https://codesandbox.io/s/bold-ishizaka-6st9k?file=/src/drag.jsx

 

It doesn't seem to have any gsap code in it.

 

[Ilima 3 Likes (Newbie)]

2 minutes ago, OSUblake said:

 

It doesn't seem to have any gsap code in it.

 

I removed it from Sandbox, since I'm just trying to get help with Draggable only

[OSUblake 18,497 Likes (Superhero)]

We still need a demo to see the problem.

 

 

 

 

[Ilima 3 Likes (Newbie)]

15 minutes ago, OSUblake said:

We still need a demo to see the problem.

 

Hmm I think I just didn't save it... I'm new to Sandbox, can you see now? 

 

[Ilima 3 Likes (Newbie)]

41 minutes ago, OSUblake said:

We still need a demo to see the problem.

 

 

 

 

Sorry again 🤔 I think the link above doesn't work... Here is the link: https://codesandbox.io/s/gallant-morning-2ggfm

[OSUblake 18,497 Likes (Superhero)]

So what's the problem? Your draggable is fine. You're just dragging a transparent circle. dragClickables is only for stuff like <a> tags.

 

https://codesandbox.io/s/happy-ramanujan-gtz69?file=/src/drag.js

 

 

[Ilima 3 Likes (Newbie)]

17 minutes ago, OSUblake said:

So what's the problem? Your draggable is fine. You're just dragging a transparent circle. dragClickables is only for stuff like <a> tags.

 

https://codesandbox.io/s/happy-ramanujan-gtz69?file=/src/drag.js

 

 

🤯 and I wasted my all day for this transparent circle! Thank you so much!