Draggable bounds to custom shape?

[shanemielke]

How difficult would be it be use draggable inside of a custom shape? In a quick initial test the bounds function works within the square/rectangle shape of a div. What about keeping the dragged object inside of a custom shape like a circle? What about a custom shape like an SVG Star?

 

I quickly tried an SVG circle tag and it didn't work. Just curious if anyone had tried anything like that before? Sorry if this has been covered before. I did a search and nothing popped up.

[ZachSaucier]

Hey Shane. For certain scenarios this sort of functionality would be simple. For other scenarios, not so much. That, along with the file size that it would require paired with how rarely people would use it, is likely why it's not included.

 

For more simple scenarios where you know the shape ahead of time you might be able to just use some calculations to make sure it's in bounds.

 

In more complex scenarios you could do something like using the pixel color as a check for bounds. Of course if your content is in Canvas that makes it much easier. But even if it's not you could use something like html2canvas to make a canvas version of it.

[shanemielke]

My initial need is simply a circle and the draggable element sits in the middle of the circle. So I can for sure just do some x/y calculations based upon the distance from the center and probably call it a day. I added the part about the "star" and SVG just in case there was indeed some quick but possibly undocumented way of doing it. This is all in HTML (not canvas) at the moment.

 

Thanks for the info !

[GreenSock]

Hey Shane! You may be able to use a custom snap function to do this sort of thing. If you can provide a minimal demo with a basic setup of what you're trying to do, we may be able to offer some suggestions. A circle is much easier than an irregular shape, that's for sure. Here's a quick demo I whipped together for you: 

 

See the Pen LYZBaoR?editors=0010 by GreenSock (@GreenSock) on CodePen

[shanemielke]

This is almost exactly what I wanted to play around with. Thank you so much for taking the time to do this. I would have probably lost an hour or two still trying to use edge resistance and bounds. You've saved me again!