Question

You know how you can click on a HTML element, like mainly images, and drag a “shadow-version” of them on the screen?

Like see the stack overflow logo? If you click and drag it, you can move a dark version of it around the screen.

So my question is, is there any way to remove the dragging of HTML elements, mainly images?

Answer 1

This is a function of the browser. It’s a shortcut to make saving images to your local hard drive easier. There are three ways to fix or work around this behavior:

• The best way is to replace the image with a div that has the same width and height of the image, and set the background-image property to the image you want. Backgrounds aren’t draggable, so this will do exactly what you want. For bonus points set the div’s style to display: inline-block; to make it more closely mimic image behavior.

• The next best thing you can do is make a transparent div the same size as the image, and position it over the image using absolute positioning and z-index. This is messier to maintain, but it might be easier to implement in your layout.

• The final option sucks. You simply add the following JavaScript to your page somewhere:

  document.getElementById('my-image').ondragstart = function() { return false; };

…change ‘my-image’ to the ID of your image element, and you’re done. But this option is a bad idea because it relies on Javascript, which not all browsers will have enabled.

As a footnote, if you’re trying to prevent your images being saved – don’t bother. It’s trivially easy to grab images with or without any amount of clientside protection.