[BUG] Reorder on both x and y axis not working well

[cbaxter713]

1. Read the FAQs 👇

2. Describe the bug

I am trying to setup a grid layout, where a user can drag to reorder any item in the grid along the x or y axis.

The docs on Reorder state:

By default, all Reorder.Item components will be draggable only on this axis. To allow dragging on both axes, pass the drag prop to child Reorder.Item components.
https://www.framer.com/motion/reorder/#reordergroup-props

I have set the drag prop on the Reorder.Item. I am able to drag on both x and y axis, however it just doesn't work as well as Reorder does on just the y axis or just the x axis. Specifically, I am unable to drag an item and put it in between two other items. I can drag to the corners/edges of the grid just fine, but I would expect to have the same smooth functionality of a single axis reorder, where I can easily drag one item in between any other 2 items.

CodeSandbox fork showing the issue: https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-forked-iigfm4?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-forked-iigfm4?file=/src/App.tsx
2. Attempt reordering any of the items in the grid
3. See that you are unable to drag an item in between any two other items.

5. Expected behavior

I can use Reorder on a grid layout, and be able to drag items along the x and y axis, with the same performance/experience as a single axis Reorder

[mattgperry]

Closing this out as there's only support for single axis reordering. I've reworded to better explain that this is referring to the visible motion of the dragged element.

Hopefully I'll get round to this PR soon: #1862

[cbaxter713]

@mattgperry ah ok, I understand what those docs are referring to now. Thanks for the response. I've found another solution for my needs at this time, but would love to use this functionality with Framer Motion reorder if/when it exists.

[liornaar]

@mattgperry ah ok, I understand what those docs are referring to now. Thanks for the response. I've found another solution for my needs at this time, but would love to use this functionality with Framer Motion reorder if/when it exists.

can you please share your workaround?
this could save my life

[cbaxter713]

@liornaar I ended up using this additional package just for the grid layout drag functionality: https://github.com/ValentinH/react-easy-sort