iOS 6 magnifying glass click work-around

Question

I'm using jQueryUI to drag some items from a list to another. For mobile, and specially, touch-driven devices, the user has to press and wait on a list item to start dragging - this is required because it does not disable the scrolling hability.

Now, with iOS 6.0 if the user keeps pressing the same list item the magnifying glass appears, which difficults the task of dragging.

Anyone know a (maybe) CSS or jQuery solution for this?

Thanks in advance.

Answer 1

The magnifying glass appears when selecting.

So add the usual cross browser user-select to your list items:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

And for good measure add the touch-callout

-webkit-touch-callout: none;

Here is a demo: http://jsfiddle.net/MadLittleMods/3tzkc/