how to disable dragging of an html element (especially "img")?

i have a image that i don't want it drag开发者_JAVA百科-able or selectable so that no drag to other places on the page. how is that done?

---

If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.

Possible options:

1. You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
2. You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.

But if the user can see the image on the webpage then it's already on their computer.

---

In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.

---

Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.

All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.

---

Why should you do it?

I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html

But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.

Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.

---

It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.

But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:

<div style='background: url("myimage.gif");'></div>

The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.

Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif

As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.

Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.

---

You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select

---

This javascript snippet does exactly what OP asks:

document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
    event.preventDefault();
}