Preventing an image from being draggable or selectable without using JS

Question

Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here's the issue:

Can be dragged and highlighted in Firefox:
So we add this, but image can still be highlighted while dragging:
So we add this, to fix the highlighting issue, but then counterintuitively, the image become draggable again. Weird, I know! Using FF 16.0.1

So, does anyone know why adding -moz-user-select: none, would somehow trump and disable draggable=false? Of course, webkit works as expected. Nothing is out there on the Interwebs about this...It would be great if we could shine some light on this together.

Edit: This is about keeping UI elements from being inadvertently dragged and improving usability - not some lame attempt at a copy protection scheme.

@JimGarrison of course not, sorry I should have been more specific, I'm trying to keep some of my UI elements from getting moved about, in the right context it's harming usability. — tmkly3, Oct 16 '12 at 04:08
Very useful instead if you have background elements that will be dragged on desktop (or worse as href code lines into some file open in background behind the browser window while working on it!) when they are close to the very small modern scroll bars and you do not hit the bar exactly each time testing the scrolls. — Garavani, Oct 11 '16 at 15:16
This has been a known issue in Firefox for [a really long time](https://bugzilla.mozilla.org/show_bug.cgi?id=1376369) as it turns out ([duplicate?](https://bugzilla.mozilla.org/show_bug.cgi?id=1326143)) — Coderer, Mar 21 '19 at 14:12

score 296 · Accepted Answer · edited Jul 14 '21 at 08:10

296

Set the following CSS properties to the image:

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

edited Jul 14 '21 at 08:10

IAfanasov

4,775
3
27
42

answered Oct 16 '12 at 02:46

Jeff Wooden

5,339
2
19
24

4

Thanks, I have those in-place as well, but the issue is starting to look like a bug in Firefox. I guess the only way to solve this for now is through Javascript. – tmkly3 Oct 16 '12 at 04:15
Worked on all browsers. – Milad Abooali Aug 21 '15 at 03:16
Alright so how do I make it show no effect but still fire the drag event? – Ty_ Sep 14 '15 at 17:49
@EW-CodeMonkey - Is this what you're looking for? http://stackoverflow.com/questions/17055044/controlling-the-appearance-of-the-html5-drag-and-drop-effect – Jeff Wooden Sep 15 '15 at 18:18
13

I found I could still drag on Firefox 47 but adding Masadow's ondragstart="return false;" property to the image tag fixed it. – andrew pate Jul 06 '16 at 13:24
@andrewpate, if you are going to use something other than CSS, then use the [`draggable` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-draggable)/[property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). It is, after all, what the [HTML Spec](https://html.spec.whatwg.org/multipage/interaction.html#the-draggable-attribute) defines as what controls if an element is draggable. (e.g. HTML: `draggable="false"` JS: `element.setAttribute('draggable',false);`, or `element.draggable = false;`) – Makyen Aug 12 '16 at 03:29
5

I can still drag in chrome – lonewarrior556 Jan 26 '17 at 22:02
17

`user-drag` only works in Safari. if you add `draggable="false"` to the image tag, it will stop being draggable. – WrksOnMyMachine Mar 22 '18 at 19:08
I left a comment on the question, but in it probably bears repeating here: [known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1326143), no apparent movement. – Coderer Mar 21 '19 at 14:12
5

When I set `user-select: none` the `user-drag: none` properties do not work... Chrome 80 – Elijah Mock Mar 20 '20 at 14:14
You should add a sample where this actually works. I tried in FF and it doesn't. Maybe it does work in some browsers? – sprajagopal Feb 17 '21 at 11:55
By 2023, according to [caniuse.com](https://caniuse.com/webkit-user-drag), this method has only 37% browsers coverage. – maxime schoeni Jul 27 '23 at 09:32

score 72 · Answer 2 · edited Jan 31 '18 at 10:22

72

You can use the pointer-events property in your CSS, and set it equal to 'none'

img {
    pointer-events: none;
}

Edited

this will block (click) event. So better solution would be

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

edited Jan 31 '18 at 10:22

Pratap A.K

4,337
11
42
79

answered Nov 23 '14 at 06:54

Linh Dam

2,033
1
19
18

2

Doing it this way makes an image icon behave more like a glyphicon, so I like this method best. – dansch Nov 09 '15 at 16:27
15

This also make events like (onclick) unusable.. be careful if you use this approach. – Nicolas Bouvrette Dec 28 '15 at 22:26
4

This answer is still valid while the accepted answer isn't on the latest software versions. This should be the new accepted answer. @tmkly3 – progyammer Jan 12 '18 at 18:17
2

this will create problem if we have click event for the image. It will block the click event – Pratap A.K Jan 31 '18 at 09:26
two answer is not better than, especially one of the answer is also the answer of other person. – Jovylle Sep 22 '22 at 11:44

score 60 · Answer 3 · edited Apr 07 '19 at 10:14

I've been forgetting to share my solution, I couldn't find a way to do this without using JS. There are some corner cases where @Jeffery A Wooden's suggested CSS just wont cover.

This is what I apply to all of my UI containers, no need to apply to each element since it recuses on all the child elements.

CSS:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

This was way more complicated than it needed to be.

$(el).on('dragstart', function (e) {e.preventDefault();}); – Pete B Aug 23 '13 at 15:16 — Pete B, Aug 23 '13 at 15:16
It could also be written as `` to match OP's code. – Masadow Oct 21 '14 at 09:05 — Masadow, Oct 21 '14 at 09:05

score 14 · Answer 4 · answered Jun 20 '13 at 16:45

Depending on the situation, it is often helpful to make the image a background image of a div with CSS.

<div id='my-image'></div>

Then in CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

See this JSFiddle for a live example with a button and a different sizing option.

score 14 · Answer 5 · answered Nov 07 '14 at 00:46

14

You could probably just resort to

<img src="..." style="pointer-events: none;">

answered Nov 07 '14 at 00:46

Thomas Bachem

1,545
1
16
10

This should be the accepted answer, user drag is not supported by firefox. Thank you for this! – Merritt6616 Feb 16 '18 at 09:38
For me too, "pointer-events" was the solution because it worked cross-browser ("user-drag" has no effect on Firefox, at least in 11.2018) – David Dal Busco Nov 07 '18 at 07:57
2

Beware that setting `pointer-events` to `none` also turns off ALL POINTER EVENTS, such as onclick, onmouseenter, etc. for JavaScript. See this answer: https://stackoverflow.com/a/27086394/12101554 – Samathingamajig Jan 16 '21 at 07:49

score 10 · Answer 6 · edited Sep 16 '19 at 19:52

10

A generic solution especially for Windows Edge browser (as the -ms-user-select: none; CSS rule doesn't work):

window.ondragstart = function() {return false}

Note: This can save you having to add draggable="false" to every img tag when you still need the click event (i.e. you can't use pointer-events: none), but don't want the drag icon image to appear.

edited Sep 16 '19 at 19:52

Guillermo Gutiérrez

17,273
17
89
116

answered Sep 14 '17 at 10:18

Philip Murphy

870
3
10
24

1

The only answer that actually works for me! Don't know why it's not voted higher. – AldaronLau Jun 23 '19 at 18:59

Pikamander2 · Answer 7 · 2022-02-16T18:35:59.273

3

Here's a four-part solution that should work in nearly every modern browser:

<img src="foobar.jpg" draggable="false" ondragstart="return false;">

img
{
    user-drag: none;
    -webkit-user-drag: none;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

You can remove the bottom four lines of CSS if you want to allow selecting/highlighting.

edited Feb 16 '22 at 18:35

answered Feb 16 '22 at 18:30

Pikamander2

7,332
3
48
69

This answer is a consolidated version of several other answers, all of which were helpful but none of which had been combined into a single convenient answer yet. – Pikamander2 Feb 16 '22 at 18:33
This will not currently work in Firefox, as `-moz-user-select: none` prevents `draggable="false"` from working. See https://bugzilla.mozilla.org/show_bug.cgi?id=1376369 – Marcio Duarte May 05 '22 at 18:18

score 2 · Answer 8 · answered Apr 17 '19 at 12:11

2

I created a div element which has the same size as the image and is positioned on top of the image. Then, the mouse events do not go to the image element.

answered Apr 17 '19 at 12:11

User

14,131
2
40
59

score 1 · Answer 9 · edited Dec 22 '14 at 06:35

1

You could set the image as a background image. Since it resides in a div, and the div is undraggable, the image will be undraggable:

<div style="background-image: url("image.jpg");">
</div>

edited Dec 22 '14 at 06:35

Lea Cohen

7,990
18
73
99

answered Dec 22 '14 at 05:28

joshua pogi 28

521
1
6
15

Halo · Answer 10 · 2022-07-21T07:55:41.710

0

You should simply add the draggable attribute to your img tag.

<img src="myimage.png" draggable="false">

edited Jul 21 '22 at 07:55

answered Jul 21 '22 at 07:48

Halo

1,730
1
8
31

Preventing an image from being draggable or selectable without using JS

10 Answers10

Linked

Related