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
  • 32,403
  • 80
  • 251
  • 422
  • 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
  • 479,566
  • 201
  • 878
  • 984
  • 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,410
  • 2
  • 27
  • 50