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

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.