Drag object inside scaled element

[onyxcool]

Hi,

thank you for the cool component! It's really useful! I'm using it for dragging elements inside a div.

Would you be kind to help me with next: the parent DIV element can be scaled dynamically by using css zoom feature. I've found that inside scaled DIV the draggable elements are moving with wrong delta.

Would you be kind to help me, how to configure dragging dynamically with proper scale value

Thank you

[grant-davidson]

css transform: scale might be easier. You'd then need to divide the deltaX & deltaY returned in positionChanged callback by this scale before making use of these to update the component position.

[jamesonhill]

@onyxcool Did you ever figure out a solution by chance? I'm having same issue where if the parent container applies transform: scale(x, y) that the position of the draggable element is incorrect while dragging.

When the scale is less than one, the draggable element moves "faster" than the cursor position. When scale greater than one, cursor is "faster" than draggable element.

https://user-images.githubusercontent.com/25965865/108414869-bf4a1c80-71fa-11eb-8dc8-8efce73161e8.mov

[SADYX]

I had the same problem but it has been solved by lastest api. Check the scale prop. My code be like

const [pos, setPos] = useState({ x: 0, y: 0 });

const onDrag = (e: any, ui: DraggableData) => {
    const { deltaX, deltaY } = ui;
    setPos(p => ({
        x: p.x + deltaX,
        y: p.y + deltaY,
    }));
}

// JSX
<div className='father' style={{ scale: SCALE_VALUE }}>
    <Draggable
        onDrag={onDrag}
        position={pos}
        scale={SCALE_VALUE}
    >
        <div className='child' >
            balabala
        </div>
    </Draggable>
</div>