Share Posted April 4, 2022 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 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted April 4, 2022 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 4, 2022 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 Link to comment Share on other sites More sharing options...
Author Share Posted April 4, 2022 That worked well Blake - thank you See the Pen abEEjrw??editors=0110 by paul-mediakitchen (@paul-mediakitchen) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted April 4, 2022 Looks good! 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