10/UI/DataTable-Ordering touch screen drag and drop 44136

[catenglaender]

https://mantis.ilias.de/view.php?id=44136

Issue

Drag and drop of ordering table doesn't work at all on touchscreens and in Webkit/Safari desktop.

Changes

• added a whole list of event listeners reproducing drag and drop on mobile
• mobile doesn't scroll when reaching the edges of the screen, added detection and scroll behavior manually.
• modifying the browser default desktop drag and drop behaviour so that Webkit/Safari is working. It still adds its own twist when drag and drop is stopping with a flyback animation that is not fitting, but I didn't look further into it for now.
• added settle animation to make UI jump more pleasant
• stopped row hovering during drag because it miscommunicates the drag position
• @yvseiler provided me with some helpful best practices of how the drag and drop could be even more user friendly:
  • add a ghostly double at the position where the item is dragged from
  • visualized position where the item would be dropped as a gap in the table
  • added a drag image to the finger position on touch, desktop behavior is mostly default browser behavior with minor tweaks so Safari cooperates.

Desktop

Mobile

Outlook / Discussion

Settle animation on desktop

I know we aren't big into UI animations, but I think in this case the little settle at the end of the drag on desktop can really help to make the UX feel just a little bit lighter and less disorienting. I would like to add this for mobile as well, if that is okay with you all.

I am not too happy with the setTimeout solution. Does anyone know a more elegant way? I suspect that a smarter solution could be done, but that could quickly grow to something that shouldn't be burried in a single UI component... maybe a small reusable animation state handler that grabs animation timing and keyframes from CSS variables and can catch edge cases like interruptions gracefully.

For now, the worst that can happen is that the animation is not triggered because the animation class was never removed if you start another drag before setTimeout could ran.

Mobile design has yet to be merged

The design for the mobile view is currently WIP in this PR: #9015

[klees]

Hi @thibsy and @Amstutz,

I have looked into this and would kindly ask you to move this on. Frankly, I do not like the code very much, it looks like the typical JS event code that also tries to accomodate various environments. Unprincipled, kind of ugly. On the other hand, I'm positive that it indeed does what it should do and I also don't really see a way for valuable improvements. Might be my lack of imagination, though.

Please have a look...