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

[Valelacerte]

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. 

 

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

[Diaco]

Hi Valelacerte 

 

you need to add " touchstart " listener too : 

See the Pen QwxXgx by MAW (@MAW) on CodePen

[Valelacerte]

Cheers Diaco  . 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. 

[Diaco]

it's native javascript event : https://developer.mozilla.org/en-US/docs/Web/Events/touchstart