clauderic / clauderic/react-sortable-hoc
Add support for yx and xy grid sorting
- Dominant language
- JavaScript
- Stars
- 10.9k
- Forks
- 959
- PR merge metrics
- No merged PRs in 30d
Description
## 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](http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=zmg2u2) 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.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.