Jump to content
Search Community

Draggable set to rotation is not respecting bounds?

Friebel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

On a page there is a svg element and a switch. The svg element is made draggable with the draggable plugin. Once for moving (draggable A set to type 'x,y'), other times, after setting the switch for rotating (draggable B set to type 'rotation').

Both draggable objects (both A for translation and B for rotation) are set to the same svg element, but if one draggable object is enabled the other is disabled first. The draggables are both set to throwprops to respect the same bounds. Both draggable objects use a <div> for these bounds (both pointing to the same <div>).

 

Both draggables are working, but there is one thing that is breaking the layout:

when the svg element is thrown 'out of the stage', and pushed back because of throwprops and the bounds, after using the rotation-draggable to spin the svg element around, when the user switches back to the translation-draggable object (after disabling the rotation draggable first), the svg element jumps (changes position).

 

I found out that the rotation-draggable changed the bounds of the translation-draggable (changing the values for minX, minY, maxX, maxY).

 

It's like the rotation-draggable is not respecting it's bounds at all and is could go over the bounds while spinning around.

 

Am I missing something here?

So my question really is: is it possible to set bounds the same way on rotation-draggables as translating-draggables?

 

I hope my explanation is a little understandable. If needed, I create a codepen later

See the Pen Vvmmge by maarten77 (@maarten77) on CodePen

Link to comment
Share on other sites

Rotational bounds are for angles. Are you trying to lock the rotation if the box will exceed the gray bounds? Calculate the angle where it will hit and use liveSnap to prevent movement if it exceeds that angle.

 

I saw that you said you tried a wrapper, but I would still use 2 different elements for the draggables. Sometimes I use a 1x1 element as the wrapper so it doesn't get it the way of anything. Just offset the difference between the two shapes using negative margins.

  • Like 4
Link to comment
Share on other sites

Rotational bounds are for angles. Are you trying to lock the rotation if the box will exceed the gray bounds? Calculate the angle where it will hit and use liveSnap to prevent movement if it exceeds that angle.

 

I saw that you said you tried a wrapper, but I would still use 2 different elements for the draggables. Sometimes I use a 1x1 element as the wrapper so it doesn't get it the way of anything. Just offset the difference between the two shapes using negative margins.

Thanks for your responses OSUblake and Diaco. I try to limit the box-rotation to the gray bounds indeed. 

 

@OSUblake, I share your opinion on having 2 different elements for draggables. But this is different. It's not preventing it for conflicts between both draggables (both draggables acting on their own <div>). The rotating draggable always influence the min- and max-values of the BOUNDS, so the element will jump while enabling the translation-draggable, because while enabling that draggable it updates the position of the element, so it jumps to be inside of the bounds again.

 

Would be a great option to add an object als bounds for a rotating draggable to keep it inside, like on the 'x,y'-draggable type. But I see now that's not what it's meant to be, at least for the moment.

 

I'll try the livesnap option. Thanks for pointing at the right direction! 

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.
×
×
  • Create New...