Skip to content
Related Articles

Related Articles

How to prevent dragging of ghost image ?
  • Last Updated : 01 Jul, 2020

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




<!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>

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




<!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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :