clauderic / clauderic/react-sortable-hoc

Add support for yx and xy grid sorting

Open
#246 1 comment 1 reaction 0 assignees View on GitHub
feature-request
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.