Owais1723 Posted May 2, 2023 Share Posted May 2, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted May 2, 2023 Share Posted May 2, 2023 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. Link to comment Share on other sites More sharing options...
Owais1723 Posted May 3, 2023 Author Share Posted May 3, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted May 3, 2023 Share Posted May 3, 2023 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 Link to comment Share on other sites More sharing options...
Owais1723 Posted May 3, 2023 Author Share Posted May 3, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 3, 2023 Solution Share Posted May 3, 2023 Are you trying to do this?: See the Pen GRYOQoL?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Owais1723 Posted May 3, 2023 Author Share Posted May 3, 2023 2 minutes ago, GreenSock said: Are you trying to do this?: Thank you thats exactly what i needed you are a hero🥰 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now