Mobile/touch friendly about react-sortable-tree HOT 15 CLOSED

I was able to enable touch dragging without any changes to the component. SortableTreeWithoutDndContext is provided so you can specify your own context at which point you can wrap your app with:

export default DragDropContext(TouchBackend({enabledMouseEvents: true}))(MyApp);

Or to keep the default backend for desktop given this comment on the TouchBackend project page:

NOTE: This is buggy due to the difference in touchstart/touchend event propagation compared to mousedown/mouseup/click. I highly recommend that you use react-dnd-html5-backend instead for a more performant native HTML5 drag capability.*

I used this where I enable mouse events for devices such as the Surface with both touch and mouse (substitute your favourite browser detection lib for isTouch):

export default DragDropContext(isTouch() ? TouchBackend({enabledMouseEvents: true}) : HTML5Backend)(MyApp);

I haven't tested extensively, but drag'n'drop was working on both desktop and iOS.

from react-sortable-tree.

@fritz-c - touch to drag on handles only, touch to scroll everywhere else, problem solved

css alterations, fits on small screen

please reconsider

from react-sortable-tree.

@evilangelist Thanks for the info! I used it and put together a little experimental demo on the newly created storybook.

from react-sortable-tree.

Awesome- I'll check it out and test for you.

Another quick question. With the search function- is it possible that it "Hides" items which don't match the search? This could be a clean way to arrange similar items?

from react-sortable-tree.

Hey @yarnball
Any success with this?

from react-sortable-tree.

@karev @Anton-Aleksandrov @yarnball
Thank for author's prompt! Only replace a modules can support mobile and touch event.
The PR link

from react-sortable-tree.

This library uses react-dnd for all the drag-and-drop stuff, which offers options for the backend - the react-dnd official HTML5 native, desktop-only drag-and-drop backend (currently used), and an independently developed touch backend. The touch backend should theoretically support touchscreen devices, but I haven't tested it at all.
If lack of touch functionality is a deal breaker for you, it would be a great help to me and others if you try out the touch backend and see if it does everything on mobile without breaking the desktop experience (which I fear it might).

from react-sortable-tree.

Wonderful! That will be a great help.

As for the hiding thing, I've created a new issue to discuss it (#9)

from react-sortable-tree.

any news for the touch support ??

from react-sortable-tree.

@karev
I'm not planning to add it. I think the scope of the changes involved would make it a better candidate for a new fork or a new repository. For one, the current UI wouldn't translate well to a small screen. Also, distinguishing a touch (to drag) event from a touch (to scroll the screen) event takes quite a bit of finesse.

from react-sortable-tree.

I'm also keen to get this working- will to check it out. Thanks!

from react-sortable-tree.

Would also like bump this thread for reconsideration. This component is already so useful, but not making it responsive is holding me back from using it to the extent I would like to use it.
Regardless, thanks for the hard work.

from react-sortable-tree.

well, I use it in a stateless function. It came out ...
Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

from react-sortable-tree.

Does this mean, it will work on react native also? (React/react native beginner here.)

from react-sortable-tree.

@abhinavzspace it will not work on react native. React native uses different primitive elements, like View instead of div, etc.

from react-sortable-tree.