search

ValentinH / react-easy-sort

A React component to sort items in lists or grids
https://ValentinH.github.io/react-easy-sort
MIT License
160 stars 25 forks source link

Ability to adjust the sensitivity of triggering the drag on desktop / Fixed horizontal position when dragging element #11

Closed DaniBedz closed 3 years ago

DaniBedz commented 3 years ago

First of all, I just wanted to say thank you for creating this package. I'm a new developer and could only dream about making a package like this! I'm loving it so far, but I have two issues that I am running into.

  1. Sometimes a 1px move triggering the drag is too sensitive. If using this on a card or element that has lots of checkboxes, buttons or other elements, it's very easy to trigger a drag. Here's an example of what I mean:

2021-05-23 14 52

It would be great if there was some way of being able to configure the sensitivity, (1px, 3px, 5px, etc), to be able to minimise accidental drags.

  1. When an item is dragged, at least if using a wide object in a vertical layout, it can be quite jarring to the user if the click doesn't happen in the middle of the item, as the dragged element shifts over to make the mouse click point the middle of the element:

2021-05-23 14 56

I can definitely see why this would be a good default behaviour in most circumstances, but in this use case it shifts most of the content off the screen and can be quite jarring. Instead, if the item could maintain its original position, but be offset horizontally by a defined amount to indicate it is being dragged, instead of shifting it off-screen, that would be a better user experience.

If there are any quick-fixes or different things I could change to resolve this, please let me know!

Thanks again for sharing this package. 👍

ValentinH commented 3 years ago

Thanks for the kind words and the super clear issue! I agree to both points.

For the first point, we can simply make this a prop with a default value of 1. This is easy and a PR is welcome.

For the second one, I like your suggested behaviour. This is a bit more complex but I'm also open to review a PR and provide guidance. I have very limited time for this project at the moment so I will not be able to implement it myself in the coming days. 🙈

guatedude2 commented 3 years ago

I have a PR to address this issue https://github.com/ricardo-ch/react-easy-sort/pull/12

guatedude2 commented 3 years ago

Fix for previous PR https://github.com/ricardo-ch/react-easy-sort/pull/13

ValentinH commented 3 years ago

The second and most important feature request was addressed by @guatedude2 and is available starting from v1.0.2. 🎉

As the first one is super small, I'm closing this old issue now and wait for someone to request it again or submit a PR.

DaniBedz commented 3 years ago

Thanks so much for your fix @guatedude2 - it works fantastically well and actually makes the first issue a lot less noticeable. 🥳

guatedude2 commented 3 years ago

Great! Glad to see its helping.