How to disable dragging an image from an HTML page using JavaScript/jQuery ? - GeeksforGeeks

12 Sep, 2019
Drag and Drop is a very interactive and user-friendly concept which makes it easier to move an object to a different location by dragging it. It allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there. In HTML 5 Drag and Drop are much easier to code and any element in it is draggable. Links and images are by default draggable. This feature is mostly enabled on most of the websites. Google is even allowing the users to do an image search using the image drag and drop feature, also known as the image dragging feature.
This feature enables the user to click on any image, and then drag it elsewhere. This creates a transparent copy of the clicked image while keeping the original image in its place. However, the image dragging feature can be disabled using JavaScript/jQuery.
Method 1: This method sets the dtraggable attribute to false using jQuery.
Syntax:
$('#myImage').attr('draggable', false);
Example:
<!DOCTYPE html><html>  <head>    <title>        How to disable dragging an image        from an HTML page using JQuery?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style="text-align:center">    <center>    <h1 style="color:green;">        GeeksforGeeks    </h1>          <h3>        Click on the button to        disable dragging an image    </h3>          <button onclick = "myGeeks()">        Disable image dragging    </button>          <br>          <img id="img" src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">         <script type="text/javascript">        function myGeeks() {            $('#img').attr('draggable', false);        }    </script></body>  </html>
Output:
Method 2: This method sets the dtraggable attribute to false using JavaScript.
Syntax:
document.getElementById('myImage').draggable = false;
Example:
<!DOCTYPE html><html>  <head>    <title>        How to disable dragging an image        from an HTML page using JQuery?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style="text-align:center">    <center>    <h1 style="color:green;">        GeeksforGeeks    </h1>          <h3>        Click on the button to        disable dragging an image    </h3>          <button onclick = "myGeeks()">        Disable image dragging    </button>          <br>          <img id="img" src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">         <script type="text/javascript">        function myGeeks() {            document.getElementById('img').draggable = false;        }    </script></body>  </html>
Output:
Picked
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?