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 draggable attribute to false using jQuery.Â
Syntax:
$('#myImage').attr('draggable', false);
Example:Â
javascript
<!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;">        neveropen    </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://write.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 draggable attribute to false using JavaScript.Â
Syntax:
document.getElementById('myImage').draggable = false;
Example:Â
javascript
<!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;">        neveropen    </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://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png">        <script type="text/javascript">        function myGeeks() {            document.getElementById('img').draggable = false;        }    </script></body>Â
</html> |
Output:
Â
