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.

Sometimes you have complex forms that people click through very quickly. Your controls include 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, annoying the customer. Here's how 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.