Labels

Disable or avert dragging an Image using JavaScript or jQuery


You can drag images on a web page and save the image on your computer or drag the image and view it on a new browser tab. Here I am showing you how to prevent or disable dragging an image using a simple method either JavaScript or jQuery. But if your objective is to prevent someone from stealing your online images, then this is not the solution.

Avert Image Dragging using JavaScript “ondragstart” event

The JavaScript ondragstart event occurs when a user drags an HTML element (in our case it’s an Image) on a web page. An image on a web page is draggable by default. We can use the ondragstart event to prevent dragging of the image.



Syntax:

object.ondragstart = function () {your script}

The Markup

 <body>
    <img src="html5.png" id="html5" width="256px" height="256px" alt="HTML5" />
 </body>

The Script

 <script>
    document.getElementById('html5').ondragstart = function () { return false; };
 </script>


Browser Supports:
  • Chrome 39.0 =+ Yes
  • Firefox 34.0 =+ Yes
  • Internet Explorer 10 =+ Yes 
  • Safari - Yes



Labels:

Popular Posts