Autoscroll

[Simba14]

Is your feature request related to a problem? Please describe. Firstly, this library is great! We are just one feature off from using this in our app: Autoscroll.

Describe the solution you'd like When a user is dragging items in a container that has overflow scroll, when the users cursor meets the containers boundaries it should scroll in the appropriate direction automatically.

Additional context Example

[ValentinH]

Thanks for opening the issue. To be honest when implementing this library I was sure that this feature would be requested soon 😅

It definitely makes sense. I'll try to work on something in the coming days but I can't commit to a date as things are pretty packed at the moment. If you are interested, you could also submit a PR. 🙂

[Simba14]

I can take a look today. Any thoughts on best method to tackle this?

[ValentinH]

I haven't started yet but I would start by looking at how other libs do it.

Actually when looking at the example you linked, I discovered "dnd-kit" which didn't exist when I started working on this library. It seems super powerful and I'm interested in understanding why you would prefer using react-easy-sort instead of it?

[ValentinH]

I've spent a couple of hours trying to implement autoscroll and it's hard 😅 : https://github.com/ricardo-ch/react-easy-sort/pull/5

I don't think I'll be able to spend more time on this as I personally don't need it. I really like dnd-kit and to be honest, I might consider linking to it on the Readme for users requiring more advanced features.

[Simba14]

I also had a go... it's tough!

dnd-kit does seem like the most extensive package out there but they also unfortunately have issues around their autoscroll that I've run into.

[TimNZ]

Bugger! This is a delightful easy to use library, dnd-kit is complicated and buggy.

[TimNZ]

@ValentinH is this discussion helpful?

https://github.com/TechStark/react-dnd-scrolling/issues/5

I won't be able to try a PR for a week or so, so if someone wants to have a go.

[ValentinH]

I also don't have much time at the moment and as explained above, I'll probably not implement it myself. I prefer to be clear on this 😅

[irtaza9]

Dear @ValentinH We are preferring your library over dnd-kit and many more because it's implementation is super easy, so please take a little bit time from your scheduleand try to add the autoscroll in it so that we can use it, Thanks.

[ValentinH]

@irtaza9 thanks for the kind words regarding this library. I'm sorry but this is not how open -source works. This library is offered for free and anyone is welcome to join and add new features if they need them. If you really need this feature and are not able to implement it, I'm available for freelancing if you are interested to pay for it.

[irtaza9]

@ValentinH no man, You should have to make it perfect if you want to give back to the community. This is not a professional way to ask others to make orders. Btw I changed the library and now dnd-kit is giving a lot more features so no more dependent to your ones.

[zloegucci]

@ValentinH did you finally decide to give up on that functionality? Dnd kit is heavy and hard to understand/maintain...

This is actually the only feature this library lacks now.

P.S. DND is also much heavier, as a react developer you often pick leightweight and easy solutions. I am sure, many people like and prefer your library over others. Why wouldnt you want to finish it?

[ValentinH]

I'm not planning to work on this in the coming weeks. I'm not using this library anymore and therefore have no need for this feature. As explained above, I'm still available to provide guidance if someone is willing to submit a PR to implement this feature.

[zloegucci]

If i pay you, @ValentinH ,how much would you want to add this feature?) I really dont want to work with DnD

[TimNZ]

If i pay you, @ValentinH ,how much would you want to add this feature?) I really dont want to work with DnD

Have a look at https://github.com/tajo/react-movable

[ValentinH]

If i pay you, @ValentinH ,how much would you want to add this feature?) I really dont want to work with DnD

What issue do you have with DnD kit?

[zloegucci]

If i pay you, @ValentinH ,how much would you want to add this feature?) I really dont want to work with DnD

Have a look at https://github.com/tajo/react-movable

Aaaahh, thats cool, thanks a lot!!!

DnD kit is heavy and hard to understand. I only need sorting in my app in many places

[benjaffe]

I worked around this by disabling scrolling on the page when we're dragging. I don't think react-easy-sort has a prop for onDragStart, so I did this:

const handleStartDrag = () => document.body.style.overflow = 'hidden';
const handleStopDrag = () => document.body.style.overflow = 'auto';

// ... and on the element I'm using as the drag handle:
<div onMouseDown={handleStartDrag} onMouseUp={handleStopDrag}>

This just makes it so the page doesn't automatically scroll when I try to drag off the screen. This is a little annoying from a UX perspective, but it's much better than scrolling up in the list and finding that I can't drop above a certain row.

Hope this helps some future traveler! And @ValentinH , thank you for this wonderful library! It's perfect to have "easy" in the name, cause it's exactly that: easy, especially compared to the other drag/drop libraries that support items in a grid layout. ❤️