search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

There is a way to use PlainDraggable for an element without erase the current style of the element? #90

Closed lucaslgr closed 3 years ago

lucaslgr commented 3 years ago

Hi @anseki , here I'm again :D

I've set my element in a plainDraggable but after that in some moment I need to rotate this element using transform: rotate(90deg) for exemple, I can do that without erase the current style that the plainDraggable lib has set on the element, but when I move the element again the element lost the transform: rotate(90deg).

There is some way to avoid this ?

lucaslgr commented 3 years ago

I've done this example, but I don't understand on my project when I move the element after rotate it the element come back without rotate.

https://jsfiddle.net/lucaslgr/4ckm7y0a/25/

anseki commented 3 years ago

Hi @lucaslgr, thank you for the comment. I tried your example. That seems to work fine. Do you mean that you can't drag the element after double clicking?

lucaslgr commented 3 years ago

No, I mean that after I rotate the element and I try to drag again the element style is reset by plainDraggable, but I don't understand why it's happing only in my vue project.

In the example above this works fine.

anseki commented 3 years ago

I see. You can specify leftTop option. Better way for performance is separating the element. For example: https://jsfiddle.net/t3y5da2o/ You might customize this for containment if you use.

lucaslgr commented 3 years ago

Hi @anseki, separate the element worked great for me! Thanks again! Could you explain me why is best for performance? I'm a beginner in this concepts

anseki commented 3 years ago

When the leftTop option is not specified, the PlainDraggable tries to move the element by using the translate CSS function. https://anseki.github.io/plain-draggable/#lefttop-option If the translate CSS function is called, web browser tries to render the page by using GPU (hardware acceleration) instead of CPU. https://www.google.com/search?q=css+gpu+performance If you will show animation, enabling GPU is better.

lucaslgr commented 3 years ago

Thanks a lot @anseki ! It is truthfully interesting! I didn't know that.

anseki commented 3 years ago

:smile: