Skip to content

[BUG] If element's layout position shifts horizontally post-drag, the drag offset remains #3315

@JonAbrams

Description

@JonAbrams

1. Read the FAQs 👇

2. Describe the bug

If the result of dragging and dropping a motion.div is that its position is moved horizontally, the drag transform sticks around, causing the element to end up much farther horizontally.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug.

https://codesandbox.io/p/sandbox/6nmt2v

4. Steps to reproduce

In the codesandbox:

  1. Drag a tile onto a tile in another row.
  2. If the tile is dragged to another row, they swap, as expected.
  3. Drag a tile onto another tile in the same row.
  4. The dropped tile flys off horizontally, ending up in the wrong place

5. Expected behavior

I expect the dropped element to be rendered as intended, with no transform applied.

6. Video or screenshots

Image

Notice that 8 and 14 swapped ok, but 1 is offset to the right by the same distance it was dragged from its origin.

7. Environment details

Happens in Chrome and Safari

Things I've tried, but didn't work for me:

  • Instead of setting top and left, I've tried x and y.
  • Applying transform with the transformTemplate
  • Instead of absolute positioning, if I lay the tiles out in a flexbox with flex-wrap, the problem gets worse. The vertical swaps are also offset by the drag distance in addition to the horizontal ones.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions