Search code examples
csshtmlfirefoxdraggable

Preventing an image from being draggable or selectable without using JS

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:

  1. Can be dragged and highlighted in Firefox:

  2. So we add this, but image can still be highlighted while dragging:

  3. 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.

Solution

  • 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;
}