Jump to content


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

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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.



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

Link to comment
Share on other sites

  • Solution

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


  • Like 1
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

Looks good!

  • Like 1
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.