Replace/Enrich liveview's `phx-click` with touch events i.E `hammer.js`

Phoenix Forum Questions / Help
,
1

I am not only asking for help but also making an proposal.

Historically seen phx-click is working well on a desktop frontend. But with mobile first all around and of course the many touch devices a better UX might be necessary.

For example:

  • Many times I have witnessed users ignoring a scrollbar on the first look and starting to swipe or the scrollbar was too small

Here is a fiddle which also supports a simple click but also a long click out of the box:

Having not much experience in creating frontends (and that’s also a reason to use liveview) I wanted to add hammer.js using a phx-hook.

“Only” problem is hammer is adding addEventListener on its own.

Anybody got this run already or is using another touch event javascript library to provide this kind of functionality?

2

Hammer hasn’t a commit in more than 6 years. Perhaps you might have better results with Draggable, Sortable.js, interact.js, or (the new kid on the block) Pragmatic drag and drop?

2 Likes
3

Thank you for pointing out hammer.js as being unmaintained!
It was all about just gestures for touch devices. “sortable.js” is working flawless here.

We ended up using:

4

Ah, good to hear. I did a bunch of work with Sortable (not in LiveView) and it worked as well as I could have hoped.