Skip to content

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:

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:

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)

Edited by Martin Mladenov

Merge request reports