jquery draggable element - small movement in mobile - prevents onclick fire

Question

I have div with an onclick() event:

<div id="my_div" onclick="alert('you clicked me')"></div>

When I add a JQUERY draggable to this div:

$(function() {
    $("#my_div").draggable();
});

It works fine in a browser. But with mobile;

• A user - on a mobile device taps the div - the div moves a very small amount.
• Now the onclick does NOT fire.

Is this typical? or some CSS issue? It seems like you have to tap very very carefully. I would expect most people would move their fingers somewhat, and there would typically be some small movement.

How do I make sure that the onclick fires on mobile - regardless of small amounts of movement?

Answer 1

The differences in how click/tap and dragging events are handled are so big across devices that the result is: nobody attaches both to a single element . Try to find one single example. If you do, consider testing it cross device/cross browser.

The "default" solution is to provide a "dragging handle" control to the element (which should fit at least a finger - min 40px * 40px - usually containing a movement icon). And only enable the draggable behavior for the element when initiated from the dragging handle.

Of course, if you want your handle bigger, the element can be the "dragging handle" of a slightly larger parent, which, besides the element also contains an action bar (which won't be initiating any dragging action but, instead, your actions of choice).