Feel free to show your appreciation...

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

Witness it in action (or lack thereof)

It appears that you have integrated jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });

Here's a pure CSS solution: implement the property pointer-events: none

To learn more about this technique, check out https://developer.mozilla.org/en-US/docs/CSS/pointer-events

To disable image dragging, simply include draggable="false" in your image tag:

<img draggable="false" src="image.png">

Please note that this feature is not supported in IE8 and older versions.

Stop dragging items by using the window.ondragstart function to return false.

Easiest way to achieve cross-browser compatibility is

<img draggable="false" ondragstart="return false;" src="..." />

A drawback of using

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

is that it does not function properly in Firefox

img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

This code snippet has proven to be incredibly effective on my website located at . The results have been nothing short of remarkable! :)

Utilize inline code to achieve this

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

Another option is to apply external or on-page CSS

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

Both methods are functioning correctly I have implemented external CSS on this website (Link Here)

For those using Chrome and Safari, a way to disable default dragging can be achieved with the following style:

-webkit-user-drag: auto | element | none;

If you're on Firefox or IE(10+), consider using user-select:

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

If you want to prevent certain images from being draggable, you can use the following code within the img tag:

onmousedown="return false;"

For example:

img src="Sunflower.jpg" onmousedown="return false;"

To prevent images from being dragged, simply add ondragstart="return false;" directly to your image tag.

<img src="http://example-image.png" ondragstart="return false;"/>

If you have a group of images within a <div> container:

<div ondragstart="return false;">
   <img src="image1.jpg"/>
   <img scr="image2.jpg"/>
</div>

This simple solution is compatible with all the popular web browsers.

This snippet of code accomplishes the desired task perfectly. It effectively stops the image from being dragged but still permits other event-dependent actions to occur.

$("img").on("mousedown", function(event){
    event.preventDefault();
});

My images were generated using ajax and are not accessible on windows.load.

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

This method allows me to control which section blocks the behavior, it only requires one event binding, and it will work for future ajax-generated images without any additional effort.

Using jQuery's new on binding:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });

<img draggable="false" src="images/exampleimg1.jpg" alt=""/>

Excellent workaround, encountered a minor conflict but was able to resolve it by enabling no conflict for other js libraries.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

Sharing this in case it benefits someone else facing similar issues.

Although it's unclear if the information provided here has been useful to everyone, I have a handy inline CSS tip that can help you prevent dragging and selecting text on an HTML page.

To achieve this, simply add ondragstart="return false" to your <body> tag. This will disable the ability to drag images. If you also want to prevent text selection, add onselectstart="return false".

Your code snippet should look like this:

<body ondragstart="return false" onselectstart="return false">

My solution stands out as the most effective. Many answers do not work well on outdated browsers such as IE8, as they do not support e.preventDefault() and the ondragstart event. To make it compatible across all browsers, you need to block the mousemove event for this image. See the example below:

Using jQuery

$("#my_image").mousemove( function(e) { return false } ); // workaround for IE
$("#my_image").attr("draggable", false); // disable dragging via attribute

Without using jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

This solution has been tested and proven effective even on IE8.

To style the image, apply the following CSS rules:

user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Preventing Drag and Drop with jQuery:

$('[selector]').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

You have the flexibility to replace the '[selector]' with any container that contains the children you wish to prevent from being dragged and dropped.

While the other responses provided valid solutions, another approach would be to use a brute force method to prevent images from being dragged by default when mousedown event occurs.

You can achieve this with the following code:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

You can see this in action on CodePen at http://codepen.io/sample-code/3456dfg

Here's a straightforward solution:

<body oncontextmenu="return false"/>

<body ondragstart="return false"/>

<body ondrop="return false"/>

A sophisticated method using JQuery

$("body").on('click','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

the on function links an event handler function for one or multiple events to the chosen elements

Not only did I implement the CSS properties demonstrated here, but also monitored ondragstart using the following JavaScript code:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

To prevent the default behavior, you can simply call e.preventDefault(). Here are some examples:

Using raw HTML:

<img
  src={item.image}
  onmousedown={(e) => {
    e.preventDefault()
  }}
/>

In a React component:

<img
  src={item.image}
  onMouseDown={(e) => {
    e.preventDefault()
  }}
/>