search

scottohara / tvmanager

PWA for tracking recorded, watched & upcoming TV shows
MIT License
3 stars 0 forks source link

Replace jQuery UI Sortable #78

Closed scottohara closed 2 years ago

scottohara commented 5 years ago

As part of the goal to remove jQuery and replace it with platform native equivalents (https://github.com/scottohara/tvmanager/issues/79), we will need to find a suitable replacement for the jQuery UI Sortable module currently used to manually drag episodes to rearrange their order.

The ideal would be a platform native solution (e.g. HTML5 drag/drop API), however that API currently doesn't support touch events on mobile as far as I'm aware, nor does it work in Chrome DevTools device emulation.

Additionally, there is a lot that goes into designing a good drag/drop UX (see Atlassian's write up on this), so even if the HTML5 API did work with touch events (but will it with Pointer Events?), there's more to it than just setting draggable="true" and attaching ondrag{start,over,leave,end} and ondrop event handlers.

Things to consider include:

  1. When a drag is initiated, the original space occupied by the dragged item is masked or made transparent. This gives the impression that the actual item is being moved.
  2. When the vertical centre of the dragged item reaches the edge of an adjacent item, the adjacent item transitions opposite to the drag direction by the height of dragged item, giving the impression that the original area and dragged item swap positions.
  3. Drag handles for list items (so that the list can still be scrolled with touch gestures, and items are only dragged if grabbed by the handle)
  4. Locking the drag axis (so that items in a vertical list can only be dragged vertically) etc.

If we do succeed in removing the Sortable module, then we can also remove the dependency on jquery-ui-touch-punch (as that was only necessary to enable Sortable to work with touch events).

scottohara commented 4 years ago

Note: testing drag in Chrome DevTools device emulation mode could be tricky, because normally click + drag is treated as a scrolling gesture

scottohara commented 3 years ago

If we just want to replace jQuery UI with another drag & drop library, this one looks pretty good (and has a jQuery version): http://sortablejs.github.io/Sortable/

Unclear though whether it supports mobile or not (so not sure if it too would require jquery-ui-touch-punch to work).

scottohara commented 3 years ago

jQuery UI 1.13.0 was reported to have native touch support; but that was years ago and jQuery UI appears to be a dead project at this point.