How to reset translate?

[kaysaith1900]

Hello anseki, i like this library very much, and thank you first.

this is my question, when i modified an element top and left value, after i dragged this element with plain-draggable, i fund the transfrom translate value won't be clear, It could cause drift issues when setting the top value.  

[anseki]

Hi @kaysaith1900, thank you for the comment. Sorry, my English is poor. Do you mean that you want to move the element to specific position?

[kaysaith1900]

Hi @anseki

for example:

const myElement = document.getElementById('myElement') const draggable = new PlainDraggable(myElement)

/ this is my custom code / let startPoint = {} document.addEvenListener('mousedown', (event) => { startPoint.x = event.clientX startPoint.y = event.clientY })

document.addEvenListener('mousemove', (event) => { // resize to big in negative side myElement.width = startPoint.x - event.clientX myElement.left = startPoint.x - (startPoint.x - event.clientX) })

document.addEvenListener('mouseup', () => { removeEventListener() }) // now in the view

i drag myElement first , i fund

myElement.style.transfrom = 'translate(movedValue, movedValue)'

when i resize with my function it will cause my view in an wrong position ,and i can't clear this translate value.

[anseki]

You can use left / top options instead.

[kaysaith1900]

Hi @anseki ,

i used 'left / top options' function ,i fund it won't be update in a strange value.

[anseki]

Could you show me your code by using e.g. https://jsfiddle.net/ ?

[kaysaith1900]

Hi @anseki ,

jsfidle is very slow here, https://kaysaith1900.github.io/ i put the demo in my github page, you can vist and check the code in chrome dev tool,

1. it is blank page ,you need press and drag mouse to create a view
2. then you can drag this view name (i used plain-draggable handle)
3. resize the view .you will find it's position will be wrong . this is the code detail: https://github.com/kaysaith1900/kaysaith1900.github.io

thank you agin !

[anseki]

You have to call position method when the element was resized.

[kaysaith1900]

Hi @anseki , It Worked!! thank you a lot . btw, can i have your email? and keep it touch . : )

[nSanhuezaKrino]

Hello @anseki , I would still like to have your email

[anseki]

@kaysaith1900, I'm glad if I could help you. :smile: Of course we can contact each other via GitHub. So, could you close this issue if it was solved?

[anseki]

Hello @nSanhuezaKrino, thank you for your comment. Could you make new issue if you have it? This is @kaysaith1900's issue.

[nSanhuezaKrino]

@nSanhuezaKrino Is there a function that changes a component's div or do you only handle the x and y?

[anseki]

@nSanhuezaKrino, Could you make new issue? This is @kaysaith1900's issue.

[nSanhuezaKrino]

@anseki okay

[anseki]

FYI; You can use PlainDraggable for handles also. Then the code becomes simple. For example: https://jsfiddle.net/10y3tumk/