14

I'm trying to do my own drag and drop function using jquery library. But everytime I mousedown on an image, then mousemove, my browser "highlights" or "selects" the image, which disrupts my mousemove operation.

How do I disable the select/highlight? I tried $('img').onselectstart = function() {return false;}, but that didn't work.

John
  • 30,741
  • 75
  • 233
  • 395
  • When you say "your own", do you mean without jQueryUI? – user113716 Feb 11 '11 at 23:55
  • possible duplicate of [CSS rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) – Ian Mercer Nov 03 '14 at 03:26

2 Answers2

25

You could prevent the default behaviour of the dragstart event...

$('img').bind('dragstart', function(event) { event.preventDefault(); });

jsFiddle.

alex
  • 460,746
  • 196
  • 858
  • 974
  • Nice. This works for me. It does lock down an element which has draggable="false" attribute, but doesn't prevent the ugly highlighting that comes with mouse selection. – MSC Jun 18 '15 at 00:44
9

jQuery UI has an undocumented method that it uses to disable browser text selection. You can call it using this syntax:

$('IMG').disableSelection();

Remember that you need to be using jQuery UI (which I assume you are).

claviska
  • 12,240
  • 2
  • 25
  • 49