Skip to content

Dragged item offset when container has CSS transform (translation on X-axis) #148

@fabricioffa

Description

@fabricioffa

Hi! First, thank you for the great library and the work you put into it.

I ran into a layout issue when using Swapy inside a container that has a CSS transform: translateX(...) applied. During a drag operation, the dragged item appears far away from the cursor. It seems that the transform offset is not taken into account when calculating the drag position.

From my observations, Swapy is positioning the dragged element as if the container were not translated at all. This results in a visible horizontal offset equal to the container’s translation.

I noticed this was previously addressed in issue #59, and the author mentioned that the fix was included in version 0.4. However, it looks like there may still be an edge case that was not covered, because the problem persists when the container is translated on the X-axis.

Steps to reproduce

Apply transform: translateX(Npx) to the Swapy container.

Start dragging an item.

The dragged preview appears shifted horizontally, not aligned with the pointer.

Expected behavior

The dragged item should remain under the cursor, respecting the container’s transform.

If needed, I can provide a minimal reproducible example.

Thank you again for maintaining this project! Let me know if I can help with testing or contributing a fix.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions