lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
973 stars 80 forks source link

Mobile drag-and-drop support #17

Open mfierro0 opened 2 years ago

mfierro0 commented 2 years ago

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.

lukasbach commented 2 years ago

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.

lukasbach commented 2 years ago

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

jnorris441 commented 10 months ago

Instead of trying to figure out their intent, could you enable dragging only by a drag handle on mobile?