Gsap draggable onDrag does not return correct angle on this.rotation

[Owais1723 3 Likes (Newbie)]

Hello I Hope you all are doing well. I am facing some issue is that Draggable onDrag returns this.rotation angle value incorrect. Please see the Image

 

const pointer = Draggable.create(".rotate-pointer", {
      type: "rotation",
      onDragStart: (e) => {
        const gElement = e.target.closest("g");
        const idx = gElement.getAttribute("id");
        selectedRadiusPointer = idx;
        roundTableDraggable[idx].disable();
        // pointer[idx].disable();
      },
      onDrag: function () {
        const rotation = e.target.getBoundingClientRect();
        const parentG = document.getElementsByClassName(`table-${selectedRadiusPointer}`)[0];
        TweenLite.to(parentG, { rotation: this.rotation || 0, transformOrigin: 'center center' });
        console.log(this.rotation, 'rotation')
      },
      onDragEnd: () => {
        roundTableDraggable[selectedRadiusPointer].enable();
      },
    });

 

This is my code and this is rotation angle values

[GreenSock 18,876 Likes (Superhero)]

Why do you think it's incorrect?

 

Please make sure you provide a minimal demo that clearly illustrates the problem if you'd like some help. 

 

By the way, you shouldn't be using TweenLite anymore - that's a dinosaur from before GSAP 3. Just use gsap.to(...). You're actually using an invalid syntax right now with that TweenLite call anyway (2nd parameter was a duration number). 

 

Once we see a minimal demo, I'm sure we'll be able to offer better help. 

[Owais1723 3 Likes (Newbie)]

22 hours ago, GreenSock said:

Why do you think it's incorrect?

 

Please make sure you provide a minimal demo that clearly illustrates the problem if you'd like some help. 

 

By the way, you shouldn't be using TweenLite anymore - that's a dinosaur from before GSAP 3. Just use gsap.to(...). You're actually using an invalid syntax right now with that TweenLite call anyway (2nd parameter was a duration number). 

 

Once we see a minimal demo, I'm sure we'll be able to offer better help. 

Hello, admin thank you for your guidance. I have made this minimal demo in code pen 

See the Pen MWPOrdj by Owais-Ahmad (@Owais-Ahmad) on CodePen

Here i am facing two problems that are.

1: I tried a lot but I am not able to get around it that I can not register two draggable on one element then the first draggable disables by it self and the second works fine which is table group first one is draggable.create(table, { type: 'x,y' }), and the second one is draggable.create(table, { type: 'rotation', tigger: dot }).

2: Second is that I want the table group to rotate around the circle center point when I select the dot on its borders. These are not big problems but i am newbie Thank you again for helping me out  

[GreenSock 18,876 Likes (Superhero)]

6 minutes ago, Owais1723 said:

I have made this minimal demo in code pen

I think you forgot to hit the "fork" button (lower right) and save it. You just posted my demo back again. Did you change anything? 

 

7 minutes ago, Owais1723 said:

I can not register two draggable on one element then the first draggable disables by it self and the second works fine which is table group first one is draggable.create(table, { type: 'x,y' }), and the second one is draggable.create(table, { type: 'rotation', tigger: dot }).

I don't understand why you'd even try doing that - you can't logically have it be both a rotational and x/y type of drag (on the same element). I must be misunderstanding what you're attempting. Are you trying to do this?: 

See the Pen eYPeywg?editors=1010 by GreenSock (@GreenSock) on CodePen

[Owais1723 3 Likes (Newbie)]

9 minutes ago, GreenSock said:

I think you forgot to hit the "fork" button (lower right) and save it. You just posted my demo back again. Did you change anything? 

 

I don't understand why you'd even try doing that - you can't logically have it be both a rotational and x/y type of drag (on the same element). I must be misunderstanding what you're attempting. Are you trying to do this?: 

 

 

sorry for the that i have updated codepen please check my reply the codpen is updated. i am sorry for the unclear conversation its first time. 

 

See the Pen MWPOrdj by Owais-Ahmad (@Owais-Ahmad) on CodePen

I need two draggables on table because i want to drag and drop table on svg canvas and also rotate it so thats why i need two draggables one for drag and drop and one for rotation

[GreenSock 18,876 Likes (Superhero)]

Are you trying to do this?: 

See the Pen GRYOQoL?editors=1010 by GreenSock (@GreenSock) on CodePen

[Owais1723 3 Likes (Newbie)]

2 minutes ago, GreenSock said:

Are you trying to do this?: 

 

 

Thank you thats exactly what i needed you are a hero🥰