Every image on a webpage is, unless you take measures to prevent it, draggable and droppable. Even on Linux, which isn't the world's most user-friendly operating system, you can pick any image on the page and drag it off, drop it onto your file manager of choice (Caja, Nautilus, KFM), and you'll be prompted for a filename under which it should be saved.

Normally, I think this is a good thing. I want the web to stay open and learnable, and I think being able to see the source code, take it apart, and see how it all works is part of the reason the web is as successful as it is. But I recently came across a use case where I really wanted it not to work.

But we have complex forms at work that people tend to click through very quickly. Some of them are card interfaces with a picture and a checkbox or radio button, and sometimes a sloppy click on one of those won't register as a click because it'll register as a drag on the photo instead. I wanted to prevent that.

The How-To Part:

Every picture has a frame. Not necessarily visible, but every picture is house in a div. To prevent the picture from being draggable and generating drag events, you simply cover it in a way to make it inaccessible, and the ::before pseudo-element selector is perfect for this:

.immobileimage {
    position: relative;
    height: auto;
    width: auto;
    user-drag: none;
    user-select: none;
    z-index: 1;
}

.immobileimage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
}

You need both user-drag and user-select to disable dragging for Chrome, and you need the image to be covered with that blank content to disable it for Firefox.

I've also created a codepen:

See the Pen Preventing Draggability by Elf M. Sternberg (@elfsternberg) on CodePen.