Hover feature is disabled unwantedly

[ianthedev]

Here is a working demo.

In the demo, a delete button is supposed to appear when its parent element (li, drag handle) is hovered/touched. Now the delete buttons can no longer appear because the hover feature of the drag handles are disabled by the plugin.

[sancho1952007]

Same Problem Here!

Even :active doesn't work :(

[shuckster]

I tried the above in all modern versions of Firefox, Chrome, and Safari on Mac and iPhone and it seems to work as expected.

What's your testing environment?

[ianthedev]

I tried the above in all modern versions of Firefox, Chrome, and Safari on Mac and iPhone and it seems to work as expected.

What's your testing environment?

My smartphone runs on Android 8. And the browser is Chrome 103.0.0.0.

[RWAP]

Remember that this is a very old version of touch punch which is never updated. Please use:
https://github.com/RWAP/jquery-ui-touch-punch

And see if that fixes the issue

[ianthedev]

Remember that this is a very old version of touch punch which is never updated. Please use: https://github.com/RWAP/jquery-ui-touch-punch

And see if that fixes the issue

Thanks. However, I just tested it and the issue remains.

[RWAP]

Interesting - yes, I can confirm on my android phone, the button does not display.

However, it is NOT an issue with touch-punch per se - I think that to hover on a touch device, you are supposed to hold your finger down on the element for a couple of seconds. However, the problem is that jquery.ui sortable takes this as meaning you want to sort the element.

Remark out the line $('ul').sortable(); in your codepen and the delete button appears when you hold your finger down on the elements.

I had a similar application which I seem to recall I ended up having two buttons - a delete and a move button to overcome this.