Combining items

[giacomocerquone]

Is something like this: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/combining.md possible with this lib? I need grid and merge support (for merge I mean exactly dragging one item to drop it over another item)

I think this would be simple to implement. I'd just need a "delayAnimationBasedOnDistance" prop (clearly the name isn't too good) in order to not start the animation if the dragged items moves only of (let's say) 200px and do something on over, if left there the "onSortEnd" function will take care of remove that item from the array and do something else with it.

I believe this "delayAnimationBasedOnDistance" could also be implemented without touching the codebase, basically I could register an onMove callback and keep the other items still until the cursor moved of N pixels.

What do you think? Should this work for you? If so I could do a PR.

[clauderic]

How does this differ from the distance prop?

With regards to combining items, it should be feasible assuming you manage the selection / combining of the items in your app and leverage the updateBeforeSortStart prop

[giacomocerquone]

@clauderic it differs from the distance prop since when you set that prop (the distance prop), if you don't do a certain distance with the cursor while clicking, it will not enable the "animation" of the item being removed from the flow. What I ask is that if you are already dragging around an element and don't do a certain distance, THE OTHER items (so not the one you're already dragging) will not animate. Substantially I need to drag the item while the other elements are not sortable

Honestly I don't get how I could use in this scenario the updateBeforeSortStart... the problem is that if I place an item over another item, the one below will very soon move at its left or right to make room for the item I'm dragging

EDIT: Ok I get what you're saying with updateBeforeSortStart, but I need the behaviour I explained above and not the one that I obtain with the "distance" prop and the other problem actually is that the sort starts as soon as the single item is removed from the flow and not when the others moves around

[giacomocerquone]

It this is not enough I can make a gif

[clauderic]

If you could provide a gif, that would be helpful, as I'm still not sure I understand your use-case completely.

I just put together an example for grouping items that I'm going to add to the storybook:

See https://github.com/clauderic/react-sortable-hoc/pull/511 for details and the code, I think this is similar to what you're describing and could be a good starting point for you to achieve what you're looking for, but perhaps I'm misunderstanding the behaviour you're looking for

[giacomocerquone]

Sorry but it's true that I said I could do a gif, but this example that I previously linked I believe is pretty clear, even more now compared to the gif you posted. Look at the differences between these two:

I'd like to achieve the first one that is the classical behaviour you've got in Windows/OSx/Linux when you want to move a file into a folder. I cannot achieve this right now because the item I want to move is not placeable over another item since the item below (the folder in the example) runs away to the left or to the right to make room for the item I'm dragging. Anyway on this last sentence a gif is arriving to explain it in a better way

[clauderic]

The behaviour you're describing is that of a drag and drop library, this library is solely focused on sorting items. Have you tried using transition-delay to prevent the animation from happening for a certain time?

Beyond the transition delay, you'd probably also need a way to cancel the transition from happening, something like shouldPreventElementMovement, which we can discuss in a PR

[hardik98]

Hey @giacomocerquone have you find out the solution that you described here ? actually i am having same requirement and couldn't find any solution with this library.