React-sortable-hoc: Feature Request: Drag and drop in a Grid

[oyeanuj]

Hi @clauderic! I thought I'll create a standing issue incase anyone else is interested in working on this or has thoughts as well.

The feature request: Be able to drag and drop across axis, i.e., in a grid of any sort. Currently, the library only works one axis at a time.

Based on conversations with @clauderic, I looked into the issue a little bit more and it seems like the changes are only limited to SortableContainer and that too, mostly around calculating offset and managing the translate3d function. I am still trying to familiarize myself with how they really work.

I also imagine we'll need to also add a new prop or modify 'axis' prop to reflect the three choices - x, y or xy.

[clauderic]

Yeah, the axis prop would need to become an array/config object, but that's a fairly small change. The tricky part will really be the animations and translate3d calculations I think. I'll look into this as soon as I get the chance

[jarrydfillmore]

+1!

[SimonSelg]

+1!

[tobiashieb]

+1!

[zaklampert]

+1

[hervejegou]

+1

[alexedev]

+1

[oshalygin]

+1. I'll do some research in the coming weeks and look into a solution. Need to familiarize myself with the library source code a bit and then take a stab. If anyone started any work on this, would be good to hop in and not waste any dev time

[richmeij]

Hi all, just stumbled upon this issue. I currently use a modified version of this lib that works in a grid. I can probably whip up a PR somewhere next week.

[clauderic]

Great news, 0.3.0 was just released, with support for sorting items in a grid! Currently, support is limited to items of equal width and height, though adding support for variable widths is definitely on the roadmap.

Huge shout-out to @richmeij for all his efforts to make this happen ❤️

[jaspersorrio]

Hi all, I cant seem to get the grid to work.

I wasn't sure if i was adding axis="xy" at the wrong element or what, so i added to every element haha.

https://jsfiddle.net/usth13z9/

[richmeij]

Hi @jaspersorrio, you only need the axis prop on the SortableContainer. All that remains is then displaying the items in a grid. See here: https://jsfiddle.net/9j3khf25/1/

[jaspersorrio]

Awesome! Thanks @richmeij !

Also was wondering if the source code to https://clauderic.github.io/react-sortable-hoc is availabe? If so where can we find them?

[clauderic]

@jaspersorrio most examples are available locally by running npm run storybook, and you can find the source code for them here: https://github.com/clauderic/react-sortable-hoc/blob/master/src/.stories/index.js

There's also an examples folder you can take a look at: https://github.com/clauderic/react-sortable-hoc/tree/master/examples