issue with Keep the Original Position and Mouse Coordinates after CSS scale

[qwqcode]

Thank you for your excellent script.

I run into some problems after i use css transform scale.

When dragging, the position of target draggable element is not coordinated with mouse cursor position. Draggable element is just like a car drifting.

In a scrollable area, when i scroll this area, the draggable element will deviate from the original position. The draggable element can't keep its original position after scrolling the scrollable area.

https://jsfiddle.net/qwqaq/0ufxjm3e/

like this ↓

Could you please help me on this issue? Thank you very much! 😀😀😀

[qwqcode]

I tried this, but it doesn't work

this.draggable.onDrag = (newPosition) => {
    const rect = this.draggable.rect
    newPosition.left = rect.left + (newPosition.left - rect.left) * (this.paperElem.clientWidth / this.paperElem.getBoundingClientRect().width)
    newPosition.top = rect.top + (newPosition.top - rect.top) * (this.paperElem.clientHeight / this.paperElem.getBoundingClientRect().height)
}

[anseki]

Hi @qwqcode, thank you for the comment.

That is correct behavior of CSS, and that has no relation to PlainDraggable. The CSS transform affects an element's appearance. See: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function Consider that you are looking at the element through a magnifying glass, and the migration length of the mouse.

That is, the scale is not good way to change the size of something that is not changed yet. If you want to change the moving, you can use onDrag. For example: https://jsfiddle.net/5rzkxpaf/

[anseki]

:cry: No reply came, then I close this issue.

[qwqcode]

@anseki Thank you very much for helping me. 😁

[anseki]

:smile: