Combination of dragging and rotating

[Antdev]

Hello

I would like to have a modal that the user can drag and also rotate. Imagine a photo on a table that is at an angle to me and I want to drag it closer to me but also to rotate it so it is straight.

 

Is there a way to use both the rotate and drag functionality at the same time with Draggable.

 

My quick test didn't work.

 

Thanks

 

Anthony

 

See the Pen MWONJmW by antdev (@antdev) on CodePen

[OSUblake]

Welcome to the forums @Antdev

 

You can cannot combine different types of Draggables like that. There can only be 1 Draggable instance per element, so your rotation one just gets killed off. You can designate a place on your element to do rotation as shown in this thread.

 

 

[Antdev]

Thank you very much for the super fast reply OSUblake. I can see why you are called a Superhero.

 

That looks like an excellent solution that should let me make the right and left sections result in a rotation and the central section just drag.

 

 

[Antdev]

I am curious what this one does? It looks like the entire card is both draggable and rotatable.

See the Pen mdqNRYQ by antdev (@antdev) on CodePen

[OSUblake]

Yeah, that's just creating a Draggable around the containing element and the element inside of it, but as you can tell it's hard to control the rotation. The rotation is based on where the cursor is in relation to the center of the element, but when you drag on the x/y axis, your mouse doesn't say locked to the same position of the card, so it's a little funky to control. Fun, but definitely funky.

[Antdev]

Thank you OSUblake - yes I agree it is a bit funky. I will stick with the other solution you recommended with the rotation elements.