Prevent selection in HTML

Question

Hi,

I have a div on a HTML page and whenever I press the mouse and move it, it will show that "can't drop" cursor like it selects something. Is there a way to disable selection? I tried CSS user-select with none without success.

Answer 1

Really? user-select will work in most modern browsers. For older ones, use this:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

For IE (at least prior to version 8), you will need to use the unselectable attribute in the HTML:

<div unselectable="on">...</div>

Sadly unselectable doesn't get inherited, meaning you have to put an attribute in the start tag of every element inside the div. If this is a problem, you could write some JavaScript to do this recursively for an element's descendants.

Answer 2

Have you got some sort of transparent image that your selecting? Usually the "cant drop" icon appears when you drag an image. Otherwise it normally selects text when you drag. If so you might have to put the image behind everything using z-index.

Answer 3

I use cancelBubble=true and stopPropagetion() in the mouse down and move handlers.