How can I disable text-selection in webkit browsers when using jQuery UI .draggable?

Question

I can't seem to disable text-selection in webkit browsers when using jQuery UI .draggable(). I've tried using the webkit specific css (-webkit-user-select and -webkit-user-drag) in various combinations but haven't had any luck.

Here's a jsfiddle where you can reproduce the problem: http://jsfiddle.net/dmosher/8ZGLR/

Answer 1

disableSelection is your friend here.

.disableSelection() is an undocumented (for now) core utility. It's useful for making text elements, or elements that contain text, not text-selectable. For example, if you have a draggable element, you may not want text selection to occur when the user goes to drag the element.

You may want to create a helper so it looks obvious that something is being dragged.

Updated demo