search

clauderic / react-sortable-hoc

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
https://clauderic.github.io/react-sortable-hoc/
MIT License
10.8k stars 980 forks source link

Unusual behaviour when dragging with horizontal mode #163

Open OliverJAsh opened 7 years ago

OliverJAsh commented 7 years ago

Hi, thanks for the fantastic library!

I am having a few issues using the horizontal mode. I followed the example in the README and it works, however the behaviour when dragging is inconsistent. See the animation below. Do you have any ideas why this might be?

I would share a code sample but it's very much coupled to my app structure right now. If needs be, I will try and isolate the problem and create a small test.

Thanks!

react-sortable

danielbartsch commented 7 years ago

Have you passed down the (right) index to your SortableElement?

OliverJAsh commented 7 years ago

Just checked, I am passing down the correct index… any other ideas? Have you seen this behaviour before?

danielbartsch commented 7 years ago

I've only ever encountered this when passing down the wrong index. Sorry

JeffreySoriano5 commented 7 years ago

Does each item has a set width. This happened to me when I didn't set a width to each item.

acupy commented 7 years ago

@OliverJAsh any luck with this issue? I am having the same problem here...

OliverJAsh commented 7 years ago

@acupy Unfortunately not!

acupy commented 7 years ago

It works with this simple solution: https://jsfiddle.net/acupy/d67r8fjr/ I hope it helps.

silvenon commented 7 years ago

I think I ran into the same issue, mine was caused by sortable item not being a direct descendant of sortable container. I forked the fiddle above to reproduce the issue by adding a <div> container around <SortableItem>. https://jsfiddle.net/silvenon/4j23r957/3/

In my case this issue is not specific to horizontal sorting, it happens on both axes.

Related #218.

silvenon commented 7 years ago

I figured out how to fix this: https://github.com/clauderic/react-sortable-hoc/issues/218#issuecomment-327144394

saranshbansal commented 6 years ago

image

I'm still facing this weird issue where cards do not exchange positions unless one card moves more than 1.5 times it's width. Also, i can't move them on y-asix. They all seem to move only in horizontal direction even though i've set axis to 'xy'.