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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to disable dragging an image
        from an HTML page using JQuery?
    </title>
      
    <script src=
    </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=
     
    <script type="text/javascript">
        function myGeeks() {
            $('#img').attr('draggable', false);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Method 2: This method sets the dtraggable attribute to false using JavaScript.

Syntax:

document.getElementById('myImage').draggable = false;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to disable dragging an image
        from an HTML page using JQuery?
    </title>
      
    <script src=
    </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=
     
    <script type="text/javascript">
        function myGeeks() {
            document.getElementById('img').draggable = false;
        }
    </script>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.