search

JakeSidSmith / react-reorder

Drag & drop, touch enabled, reorderable / sortable list, React component
https://jakesidsmith.github.io/react-reorder/
MIT License
218 stars 58 forks source link

Freezes window scroll on touch #51

Open adsteel opened 8 years ago

adsteel commented 8 years ago

I am unable to window scroll when dragging on the list on a touch screen. The window scroll event is swallowed and all I can do is reorder. If I move the list to a div that scrolls, it works fine.

JakeSidSmith commented 8 years ago

You shouldn't be able to scroll while dragging an item. Scrolling is implemented so that when you drag an item near the bottom / top of the list it'll scroll automatically.

Imagine you're trying to drag an item from the center of the list to the top. If scrolling was also allowed then you would end up scrolling down the page, and you'd never be able to place the item at the top.

Make sure the list container is scrollable & it should work fine. :)

adsteel commented 8 years ago

@JakeSidSmith Thanks for the quick response! It does work fine in a list container. But I don't want to constrain it to a list container. I want to have a normal window, with a list that disappears off the page. I want to both be able to scroll the page to see the rest of this list (by touch/dragging the list), and to reorder the items. Does that make sense?

JakeSidSmith commented 8 years ago

Ahh, I think I see what you mean. Even while not dragging an item you cannot scroll past the reorderable list?

adsteel commented 8 years ago

On a touch screen, I cannot scroll the page when I touch-drag on the list. The page scroll event seems to be swallowed. I can still scroll the page when I touch-drag elements outside of the list, and I can reorder the items I can see in the list.

JakeSidSmith commented 8 years ago

Kk. Well, this'll definitely need a fair bit of work. This component was designed to work like a native Android / iOS listview, and they don't tend to have other scrollable content around them.

I'll have a quick look now. :)

adsteel commented 8 years ago

Thanks!

You can see this in your demo if you:

  1. disable the overflow:auto on the container div (or remove the list from any otherwise constrained container div)
  2. create enough list items that they disappear off the end of the page
  3. use the chrome iPad emulator to try to scroll.
JakeSidSmith commented 8 years ago

I've stayed up way too late working on this, but I'm very close to a breakthrough. Will hopefully have the solution tomorrow. Gonna sleep on it. :)