how to apply transform:scale to Draggable?

[linux019]

No description provided.

[MrDockal]

You can pass scale property down to Draggable

<Draggable {...dragHandlers} scale={0.5}>
    <div className="box">I can be dragged anywhere</div>
</Draggable>

[yh54321]

You can now do this by wrapping your <Draggable> component in a <div> styled with a scale transformation transform: scale(1.2);. Then add the 'scale' attribute to your draggable component with the same scale value: scale={1.2}.

This issue can be closed @STRML

[jamesonhill]

It doesn't seem like the <Draggable> component properly handles scaled containers while dragging. If you apply transform: scale(x, y) to the container element and supply that value to the scale prop, the cursor and the draggable element do no move in sync. See below example w/ 0.5 scale.

Screen.Recording.2021-02-18.at.3.04.17.PM.mov

[yh54321]

@jamesonhill You can't use transform: scale(x, y); here, only transform: scale(x);. Did you implement this exactly as I advised in my comment? The value you pass as a prop must be the net scale on the component. It works perfectly for me.

[jamesonhill]

@yh54321 My issue ended up being caused by another library's usage of react-draggable (react-grid-layout/react-grid-layout#1393), not react-draggable itself.

[ronyland]

It doesn't seem like the <Draggable> component properly handles scaled containers while dragging. If you apply transform: scale(x, y) to the container element and supply that value to the scale prop, the cursor and the draggable element do no move in sync. See below example w/ 0.5 scale.

Screen.Recording.2021-02-18.at.3.04.17.PM.mov

I fixed it by updating the react-draggable from version 2.2.2 to version 4.4.3