Draggable circle that rotates - how can I prevent transparent areas initiating drag

[mkit]

Hello everyone 

I am creating an interaction where there are some circles that the user can drag to rotate. I have this working (see codepen).

 

However I do not want the area inside the circle or outside the circle to be draggable. It appears to use the entire square as the trigger and does not ignore transparent areas. I do appreciate this can be handy when you want a hidden trigger.

 

Anyway just wanted to reach out for any solution to this issue? Perhaps I have just missed a flag I can use.

 

Paul

See the Pen f8311e8249ad7d54333e8a45d0546101 by paul-mediakitchen (@paul-mediakitchen) on CodePen

[OSUblake]

Hi Paul, 

 

You really can't prevent that using an image as there will be pointer events on every part of the element. Your best bet is probably to use an SVG. Just a quick demo of a box showing the you can't drag in the empty spaces.

 

See the Pen WNddKKB by GreenSock (@GreenSock) on CodePen

 

[mkit]

Thank you Blake. 

 

I will try adding a transparent SVG below the graphic circle image and that should do the trick.

 

Thank you kindly for the fast reply.

 

Paul

[mkit]

That worked well Blake - thank you

 

See the Pen abEEjrw??editors=0110 by paul-mediakitchen (@paul-mediakitchen) on CodePen

[OSUblake]

Looks good!