Jump to content
GreenSock

Valelacerte

X,Y and rotation drag on one element via two triggers

Recommended Posts

I am creating an SVG 360 degree protractor that needs to be dragged (x,y) and rotated via two controllers (triggers) within the same SVG. The circular arrows in the illustration are the rotation controls, the vertical and horizontal arrows are the x,y controls and the "RESET" button just clears all Greensock properties. 

 

I used a solution posted by Diaco, which works very well for desktop, but by using mousedown events rather than Greensock's native onClick events it appears that one loses mobile touch events built into the Greensock library. Attempting to bind two event listeners to the same root SVG element appears to only leave the last one applied active, in this case the x,y drag. 

 

Can anyone think of a solution whereby I can use Greensock's native events (no desktop only events) and apply x,y and rotation to the same SVG element triggered by two elements within the same SVG? I have tried wrapping the SVG in a DIV and then applying x,y to the DIV and rotation to the SVG, but this just creates more complexity and weirdness regarding the translation of the DIV versus the SVG; sometimes after dragging the DIV rotation origin would change, despite setting it in CSS. 

 

Many thanks in advance. 

 
protractor-360.png

See the Pen grXVoZ by OinkQuack (@OinkQuack) on CodePen

Link to comment
Share on other sites

Cheers Diaco  :-P. I was under the impression that jQuery didn't support mobile events, only jQuery Mobile did. Pardon my ignorance, but is touchstart a raw JavaScript event, or from Greensock?

 

Thanks once again. 

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.
×