Preventing images and text to be selected

Question

I have an image being hacked in as a background image (as shown here). I\'ve noticed that if I drag my mouse over it though, it selected the image so that it can\'t be deselect

Answer 1

If you are using jQuery I've written a tiny jQuery plugin - wrapper that does pretty much what ppumkin wrote:

(plugin is in js part along with an example usage) http://jsfiddle.net/gryzzly/HtvB8/

Answer 2

If you load image as div's background you can't select it.

---

EDIT

 <div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

Answer 3

Add this to your style sheet

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectEnable { 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Just add the class selectDisable to the element you want to prevent from being selected.

The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.

Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.

You could also prevent dragging by adding another empty div on top of your image with the same selectDisable class.

Here is a working example:
http://jsfiddle.net/xugy6shd/3/

Answer 4

draggable="false" worked for me