React-sortable-hoc: Add support for yx and xy grid sorting

[jlwatkins]

Problem

I am having trouble using this library for a Grid. I have multiple 2 by 3 grids and the ordering is by row. I wish it was by column, because this is mocking other libraries on Android and iOS which use column ordering.

Row Ordering ( Current System)

Item 1 | Item 2 | Item 3
------------------------
Item 4 | Item 5 | Item 6

Column Ordering (What Is Required)

Item 1 | Item 3 | Item 5
------------------------
Item 2 | Item 4 | Item 6

Hacky Current Solution

Currently I am attempting to hack this by transforming the content after I build a Grid that is 3x2, but the dragging functionality seems to break. I used this demo page and applied this CSS using Inspect in Google Chrome as a work around, but am having problems.

CSS to Rotate

transform: rotate(-90deg) scaleX(-1);

Grid before Rotation

Item 1 | Item 2 
---------------
Item 3 | Item 4 
---------------
Item 5 | Item 6

Grid after Rotation

Item 1 | Item 3 | Item 5
------------------------
Item 2 | Item 4 | Item 6

_Note: I do have to rotate the entire grid, and then each individual element. Any other (CSS) classes I should have rotated that might make this work? The only problem is dragging to some positions seems to not work. I imagine this is something in the source code or classes being created inbetween_

Conclusion

This would be a great feature of the library to be able to choose the ordering, especially because this is relative to a RecyclerView grid on Android and a CollectionView on iOS where the implementation as vertical / column ordering.

Any suggestions welcome. A library fix for this would be ideal.

[jlwatkins]

Proposed Solution

I believe the best way to make this possible with the current API is pretty simple. For the axis property available via Prop Types should have options:

• x - Horizontal
• y - Veritical
• xy - Grid (Row Ordering)
• yx - Grid (Column Ordering)