Support for mobile/touchevents

[Arun Menon]

I came across this library yesterday when i was looking for a viable DnD tree solution. The features that this library provides handles all my usecases, except for the support for touchevents/mobile. I am wondering if you are considering supporting this feature sometime.

Personally, for my project, mobile/touch support is a critical requirement. So to test the viability, i went ahead and forked the library and tried some rudimentary fixes. react-dnd-touch-backend was required as a dependency. Please see my effort by installing:

"dependencies": {
    ....
    "@minoru/react-dnd-treeview": "https://github.com/arunmenon1975/react-dnd-treeview#touchsupport", 
    ....
    }

and adding the following 2 props - touchSupport and touchSupportOptions:

<Tree
  tree={treeData}
  touchSupport={true}
  touchSupportOptions={{
      "enableMouseEvents" : true
  }}
  rootId={0}
  onDrop={handleDrop}
  render={(node, {depth, isOpen, onToggle}) => (
    <div style={{marginLeft: depth * 10}}>
      {node.droppable && (
        <span onClick={onToggle}>
          {isOpen ? "[-]" : "[+]"}
        </span>
      )}
      {node.text.en}
    </div>
  )}
/>

It works on touch-enabled environments but there are issues, the biggest being that the Preview/Ghost component doesn't appear. I think integrating the recommendations at the react-dnd-touch-backend docs with this library can be slightly complex. Another option is to use react-dnd-preview from here which seems to automatically create the preview for the environment the user is in. But not sure if that would mean requiring a peer dependency or if it will need to be packaged along. This may also mean that dragPreviewRender may change or perhaps not be required.

Note: Adding react-dnd-touch-backend created a few typescript issues because of the version mismatches and thus i had to upgrade React/React-DOM/react-dnd-html5-backend/react-dnd to the latest versions. For some reason i also had to add @types/hoist-non-react-statics to the dev dependencies.

[minop1205]

Thank you!
As you said, mobile/touch support is an issue for this component.

Ideally, the component should be able to determine the touch / click event without additional options, but it may be difficult.

I'll try it myself based on your comment.

[Arun Menon]

ok, thanks for the comments. I think touch support is a reasonable requirement considering that web apps are increasingly accessed on mobile and similar touch enabled devices.

Incidentally I do have an alternate approach in place in my project but without DnD: a popover + wizard solution that is mobile-friendly but it is long-winded, in comparison.

The UX of a DnD-enabled tree is immense (in certain usecases) since so much can be accomplished within a single page/screen and it also fits easily into the user's through process as the interactions are straightforward and with no surprises. But generally DnD trees are not usually advised as a go-to solution for mobile screens because of the limited screen space as well as the need for large 'touchpoints' and the consequent scrolling that cannot be avoided. Not having a preview/ghost makes it totally non-usable.

In my usecase, while the interaction is critical, it is not likely to be used heavily (since it is an admin need) so it is fine. The benefits will far outweigh any concerns at the moment.

Thanks again for the comments and looking forward to future releases.

[minop1205]

I merged support for touch devices.
#40

I use this module to automatically identify mouse events and touch events.
https://www.npmjs.com/package/react-dnd-multi-backend

This module is used to automatically identify mouse events and touch events.
It supports both mouse and touch events by default, so there is no need to add any new properties.

However, the default preview is not displayed on touch devices, so if you want to support touch devices, you need to define a custom preview using dragPreviewRender. (I have added this to the README)

I plan to publish it as v1.4 in the near future.

[Arun Menon]

This is great news! I am looking forward to the release.

The tree is still not finalised in my project. Since the tree drag-drop interaction is critical (it may not be used heavily by the user but when it is used, it makes core changes that effects the very structure of the app as a whole) and has to be fully reliable, i have to make sure that the tree component in use works under all circumstances.

I have been fine-tuning a non-tree (or actually more of a 'semi-tree') workflow just in case as an alternative. But a fully functional tree will help in getting a much better UX.

[minop1205]

Version 1.4.1 has been published today. (v1.4.0 is missing because of a mistake in fixing CHANGELOG.)

It adds support for touch devices by default, so no additional configuration is required.

You can try it out if you like.

[Arun Menon]

I just tried it now with sample data and everything works fine. The Tree is now touch-ready on a mobile as well. The fact that the dragPreviewRender prop is made available allows for customisation of the preview, a very useful option indeed.

Thanks for adding this feature. I will need to make some mods before i attempt it on my own data sources.

Closing the issue/feature-request since it is now fully working.