Resolve "Preferences drag and drop does not work on touch-based devices" and add grip icon
JQuery does not natively support touch events. I added a library which allows it to do that.
This library is called jquery-ui-touch-punch, but it has not been updated since 2014, so I used a more recently updated fork, which is supposed to fix some issues with certain Windows laptops and Apple Pencils: https://github.com/RWAP/jquery-ui-touch-punch
There is still a problem - if the list of projects to sort is long, scrolling can be cumbersome since dragging would reorder the projects. There is a PR which fixes this issue by requiring the user to long-press on a project for a bit before it becomes draggable, but it is not merged: https://github.com/furf/jquery-ui-touch-punch/pull/290
A smaller issue is that project names are not clickable on touchscreens, so it's not possible to navigate to a project from the preference list. The star to mark a project as favourite is also not clickable.
Update: I merged this PR into the fork and this fixed most issues. Scrolling is no longer a problem and project names and stars are now clickable on mobile. I set the long-press time before you can start dragging to 250ms, which feels natural to me.
I have tested it on the following devices:
- PC with Firefox (without touchscreen)
- PC with Chromium (without touchscreen)
- Android phone with a Chromium-based browser
- iPhone with Safari
- iPhone with Firefox
Other devices I haven't tested, some of which could potentially cause issues, are:
- Touchscreen laptop
- macOS device
- iPad
- Android tablets
- A device with touchscreen support but with a mouse attached (e.g. a touchscreen laptop with a mouse, or an iPad or an Android tablet used with a keyboard and mouse instead of touchscreen)
- Apple Pencil
- Samsung S-Pen
Closes #496 (closed)