svg element returns to it's original position after window resize/scroll

[girtskokars]

if transition css property is set to draggable element, the element will move back to it's original position as if the new position values have been removed.

https://jsfiddle.net/u60dpnhv/

steps to replicate:

• move the rect element anywhere inside svg
• resize window

[anseki]

Hi @girtskokars, thank you for the comment. Sorry, do you mean that you want to use something (CSS property) with a transition effect? If so, you can specify the CSS property that you want via transition-property property. For example, you want to use color property with transition effect:

transition-property: color;

See document: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

[girtskokars]

not exactly, i've set the transition property so the element would animate (transition) to new position when i programmatically set it's new coordinates, but it's not the issue i'm describing - the issue is that the element moves (sets/removes coordinates) when it shouldn't.

if there is no transition property set to the draggable element, it doesn't change it's position after window resizes (correct):

but if i set the transition property and resize the window - svg element moves to it's original position:

you can see and reproduce the problem in the following jsfiddle - https://jsfiddle.net/u60dpnhv/ note that this issue is only with svg elements, other HTML elements (ex, div's) seem to be working correctly

[anseki]

Hmm... Sorry, I couldn't understand that. What is problem? That is, since you specified the transition, it is a matter of course. Then, the CSS behavior is correct. Also, you can avoid using the translate for HTML element. https://anseki.github.io/plain-draggable/#lefttop-option

[girtskokars]

i'm sorry, i don't think i can make it any clearer for now i'll just use div elements, as they work without any issues, but if i have the time i'll look into the source code and try to debug the issue

[anseki]

Sorry, I don't know what you want to do, but if you want to do something by using the translate, I think that the PlainDraggable is not suited to your app because it uses the translate to move an element.

[anseki]

No reply came, then this abandoned issue is closed.