How to prevent dragging of ghost image ?

While clicking on an image on a web page and trying to drag it from one point to another, often a replica of the image follows the cursor movement until it is dragged. This replica of the image is termed a ghost image.

Due to personal preferences or requirements of the website, it may be required to prevent this ghost image from being produced on the screen, that is, sometimes it may be required to prevent the dragging of a ghost image. The example below shows what a ghost image looks like by default.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Prevent dragging of ghost image
    </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: #008000">
        GeeksforGeeks
    </h1>
    <hr>
  
    <p>
        Dragging a ghost image
    </p>
  
    <img id="sampleImage" src=
</body>
  
</html>

chevron_right


Output:

In the above example, when the image is clicked and dragged, it creates a draggable ghost image that follows the cursor. To prevent dragging of this ghost image, the draggable attribute is used. On setting this attribute for that image element to “false”, its dragging is prevented. The below example demonstrates this.



Example:

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Prevent dragging of ghost image
    </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: #008000">
        GeeksforGeeks
    </h1>
    <hr>
  
    <p>
        Dragging of ghost
        image prevented
    </p>
  
    <img id="sampleImage" src=
        draggable="false">
</body>
  
</html>

chevron_right


Output:

full-stack-img




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.