[FEATURE] Multi-axis support in `Reorder.Group`

[tommoor]

Is your feature request related to a problem? Please describe.

The new Reorder components are great for horizontal and vertical lists, it would be fantastic to have first class support in the same api for re-orderable grids. I also raised this on twitter as the wording in the docs can be read as if this feature already exists.

Describe the solution you'd like

Ideally the axis prop on Reorder.Group would take an additional option axis="xy", or similar. It could be that the reality of dual axis makes the interface more complex, but this would be the ideal.

Describe alternatives you've considered

The alternative would be custom building using the drag and drop primitives as pre-5.

[nanxiaobei]

Really need this!

[AndrejGajdos]

would be great having this feature

[chocobuckle]

That "To allow dragging on both axes, pass the drag prop to child Reorder.Item components." line in the Reorder.Group props section completely threw me for the past 2 days. I too was under the impression that xy reordering was supported after reading that, only to now stumble upon the Twitter thead linked to above.

Would be fantastic if this could be added.

[cjoecker]

Just submitted a Pull Request. This is how it is going to look:

[flackeryy]

Updates here ?

[cjoecker]

Updates here ?

The PR is open since Sep 01 but no answers yet :(

[flackeryy]

Yeah I see... however I have almost working example on codesandbox with custom drag dandlers, but it has some problems that i'm trying to resolve... So wanted to check if there is something ready from the box.

So i'll try to resolve bugs of my version :(

[cjoecker]

You could also copy-paste what I made and use patch-package to save the changes in your node-modules

[flackeryy]

@cjoecker

just in case, maybe you know a solution..

If you could look at this very old variant that I found, it looks like the old onDrag handler on each box, returns point parameter that looks like a dragged distance from the initial position of a component.

For example: when the first box on 0 index, and you drag in to right, the point parameter returns x pixels you already dragged from the box initial position. When the box switched to 1 index, point parameter returns x is negative value until you move box finally to new position, and once you move more and more to right, it has x as positive value so It looks like, once box index is updated (reordered), it understands that initial x,y changed and point parameter has new correct info.

---

The problem now, in latest framer-motion version, onDrag handler returns point, offset, delta parameters that are completely different to what was before, in old version. I'm checking the docs description to each parameter and its not same.

So it looks like right now onDrag event doesn't contain the parameter that contains dragged distance from the initial position of a component. However I need it to make my code works correctly...

[flackeryy]

Ah.. nevermind, sorry, I understand why it is happened like I want in old version. In old version, each box has positionTransition handler that gets a new position delta after reorder and updates it, so that why it understands the new position x,y.

Just sad that this handler is removed in new versions, and need to understand how to make similar move now

[flackeryy]

@cjoecker done! it's new onUpdate property, it contains x,y of dragged component based on current component position. Exactly what I need. Sorry for bothering you.

[mattgperry]

@cjoecker I don't know why I've not been getting updates to your PR but thanks, I'll take a look asap although the next week will probably be a little busy with layout animation work

[nanxiaobei]

Any updates?

[artemshchirov]

Any updates?

[cjoecker]

@mattgperry the PR for this issue is open for more than one year. Can you give it a check, please?

[jxhnxllxn]

any updates?

[alexanderhorner]

Would also really appreciate this!

[ImZaryab]

Need this feature ASAP

[pradeep3912]

Any updates?

[harisiqbal12]

Any Updates?

[cjoecker]

Since the PR has been open for almost two years and see no updates on that, you can take the code from the pull request and add it with npm patch-package

[117]

not sure how this hasn't made it in...