Open In App

How to prevent dragging of ghost image ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 01 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads