[Draggable] rotation and x,y on the same element

[Achim]

hello all,

i am trying to implement a draggable function. You should be able to move the DIVs with class "rnd" and rotate them with the rotate icon. Only if I have done rotation first, it can be moved. "move only" does not work. what could be the reason for this? I tried to solve it with a proxy (var rotateDraggable = new Draggable.create(rotation, ...), but I do not get it that the rotation is not applied to the proxy, but to the DIV.

 

 

thanks a lot for your help

Achim

See the Pen jOdMrxv by achimappel (@achimappel) on CodePen

[Rodrigo]

Hi @Achim and welcome to the GSAP forums!

 

Is not possible to create two different Draggable instances with the same element as the target, as soon as you create a second instance, the first one will be killed and become eligible for garbage collection.

 

The simplest thing you can do is wrap your element in order to make that wrapper the one that is moved with the x/y Draggable and add an extra element to trigger that Draggable instance or the rotation one.

 

In this simple demo the blue box is inside an element with no styles, so it's dimensions depend on the blue box. The blue box also has an extra element inside. You can rotate the box by dragging the blue box and move the blue box parent by dragging the red dot:

See the Pen LYqRyZB by GreenSock (@GreenSock) on CodePen

 

You can of course change this by adding the red dot in a corner for example, and make the red dot the one that rotates the element and the blue box moves it's parent:

See the Pen QWYKvBp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Achim]

@Rodrigo you made my day 🤩

thanks a lot, that was exactly what i was looking for - and btw perfectly explained!