react-complex-tree
react-complex-tree copied to clipboard
Mobile drag-and-drop support
Hey, really great library, thanks for the work!
As the selection and drag events differ on mobile and desktop, DnD behavior currently doesn't work on mobile. Is this on the roadmap? (Or how much work would it be to implement?)
I think the mappings are:dragstart
is touchstart
; drag
, dragenter
, dragover
, dragleave
is touchmove
; drop
, dragend
is touchend
.
Hi, thanks for the feedback! Not on the roadmap currently, but if it's not big effort, and really just a remapping, I'll try to include it in the next release.
I've looked into it a bit, but as it turns out, touch events are not quite as trivial to implement for tree views, so I've decided to leave them out for now.
Detecting whether a user is trying to initiate a drag event or just scroll by dragging requires quite a bit of additional logic (would listen for a touch down, then check if the user roughly keeps his thumb at the same location for about 0.5s, then move his thumb, then initiate a drag; otherwise if he moves his thumb sooner after he puts it down, ignore the event and interpret it as scroll event). Also additional handling for multi-select would be required. I think adding all of that bloat the library too much.
Note that there are programmatic ways to control drag interaction, so there are still ways to provide functionality to users on mobile endpoints, e.g. by
- providing an option that toggles a select mode, where every click toggles an items selected state (should be possible with custom interaction manager)
- provide buttons that control dnd, i.e. a "move items", and then programmatic controls to choose the target.
Instead of trying to figure out their intent, could you enable dragging only by a drag handle on mobile?