search

react-grid-layout / react-draggable

React draggable component
MIT License
9.01k stars 1.02k forks source link

Cannot Rotate #717

Open renzhiVivio opened 1 year ago

renzhiVivio commented 1 year ago

I create a DOM in react-draggable, now I rotate the DOM

since react-draggable will set a transform property inside the DOM when render, it makes my transform rotate properties not working properly

for example, the DOM css is transform: translate(265px, 262px), but what I want is transform: translate(265px, 262px) rotate(33deg)

how can I acquire?

image the blue rect shadow DOM indicating react-draggable, which doesn't rotate

svasighi commented 1 year ago

Hello renzhiVivio,

I have solved the problem using the following approach:

const dragHandler = (e: DraggableEvent, data: DraggableData): void => {
        data.node.style.rotate = ${360 + (data.x / 50)}deg;
}

Please let me know if you have any questions or concerns.

lamhungypl commented 9 months ago

Hi @svasighi , could you provide how to use the dragHandler

salfel commented 8 months ago

If someone has the same problem as above, replace Draggable with DraggableCore, because Draggable implements some display logic and is a wrapper around DraggableCore, when now using DraggableCore, you have full control of the placement of the draggable