Problems when scale transform applied to parent

[fredGitelman]

This is my first ever issue-report. Sorry if it is not appropriate for whatever reason.

As far as I can tell, If any ancestor of the div you are trying to drag has a CSS scale transform, things don't work very well (at least on Chrome on Mac - have not tested elsewhere).

It is kind of hard to describe the exact symptoms - there are different problems depending on if you scale up or scale down both for simple dragging and for bounds-checking.

These problems are easy to replicate using dev tools on your demo and editing CSS to include (say) transform: scale(.75) or (say) transform: scale(1.5).

Thanks for ngDraggable!

[xieziyu]

Thanks for reporting this issue. It indeed overwrites the transform style. Need to fix.

[xieziyu]

Fixed in v1.1.0: Please set [scale] option to fix this issue.

[paresh-2016]

@xieziyu [scale] option is not working - it is creating more issue I believe the PR generated by @Daithi1 is stable and working fine.

If possible can you please validate that PR or please elaborate the issues so that we can take look further...

[xieziyu]

@paresh-2016 Please provide more details about [scale] option issue.

Daithi1's PR failed the test when [inBounds] and [boundary] set. The dragging element hit the boundary and bounced off.

[rathodsanjay]

@xieziyu even after using the [scale] option the issue remains where if there is a CSS transform scale applied on the parent of the element we want to drag, the cursor and the element become de-synced.

So it seems like we need to divide the translateX and translateY in the transform() function by the scale

[xieziyu]

@rathodsanjay Thank you. I've published new version with your fix.

[rathodsanjay]

@xieziyu Thanks!

[rathodsanjay]

@xieziyu - I have made a minor enhancement to the above changes, to prevent the component from changing its position on initial click when css scale is applied to the parent element. I have raised a PR for the same - #134

[InYourHead]

There is one more problem. When you have set scale != 1 (e.q. 0.6) and your div already exist, everything works prefect. The problem occurs, when you try to assign new value to [position] when div is already created and [sclae] is set. The output position is different then expected. The scale value is not used while setting new position value by user.