React-sortable-tree: Mobile/touch friendly

[yarnball]

Hi Fritz,

This looks fantastic! This doesn't seem to work with touch devices (I'm using Safari and Chrome on mobile).

Is there a way to do this or is this something that may happen in the future? Thanks

[fritz-c]

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).

[yarnball]

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?

[fritz-c]

Wonderful! That will be a great help.

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

[kulikalov]

Hey @yarnball
Any success with this?

[karev]

any news for the touch support ??

[fritz-c]

@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.

[StoneCypher]

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

css alterations, fits on small screen

please reconsider

[aemoe]

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

[yarnball]

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

[MitchEnfield]

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.

[evilangelist]

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.

[fritz-c]

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

[superlbr]

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.

[abhinavzspace]

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

[fritz-c]

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