Article Categories

Selected Reading

How to prevent dragging of ghost image?

HTML Web Development Front End Technology

By default, HTML elements including images display a ghost image when dragged by users. This ghost image is a semi-transparent copy that follows the cursor during the drag operation. However, for certain images like logos, icons, or decorative elements, this dragging behavior may be undesirable as it can confuse users or interfere with the intended user experience.

In this tutorial, we will learn various methods to prevent the dragging of ghost images using the draggable attribute, JavaScript, and jQuery.

What is a Ghost Image?

When you drag an image element, the browser creates a semi-transparent copy called a ghost image that follows your cursor. This visual feedback indicates that the element is being dragged. While useful for drag-and-drop operations, it can be distracting for non-interactive images.

Syntax

Following is the syntax to prevent image dragging using the draggable attribute

<img draggable="false" src="URL" alt="description">

The draggable attribute accepts three values

true Element can be dragged (default for images)
false Element cannot be dragged
auto Browser decides the default behavior

Default Image Dragging Behavior

Let us first observe the default dragging behavior of images

<!DOCTYPE html>
<html>
<head>
   <title>Default Image Dragging</title>
   <style>
      img { 
         width: 300px; 
         height: 200px; 
         border: 2px solid #ccc;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Draggable Image (Default Behavior)</h2>
   <p>Try to drag the image below:</p>
   <img src="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt="TutorialsPoint Logo">
</body>
</html>

In the output, you can click and drag the image to see the ghost image effect. The semi-transparent copy follows your cursor during the drag operation.

Using the draggable Attribute

The most straightforward method to prevent image dragging is using the HTML draggable="false" attribute

<!DOCTYPE html>
<html>
<head>
   <title>Prevent Image Dragging</title>
   <style>
      img { 
         width: 300px; 
         height: 200px; 
         border: 2px solid #ccc;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Non-Draggable Image</h2>
   <p>Try to drag the image below (it won't work):</p>
   <img draggable="false" src="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt="TutorialsPoint Logo">
</body>
</html>

The output shows an image that cannot be dragged. When you try to click and drag, no ghost image appears.

Non-Draggable Image
Try to drag the image below (it won't work):
[TutorialsPoint Logo - cannot be dragged]

Using JavaScript to Prevent Dragging

You can dynamically set the draggable attribute using JavaScript's setAttribute() method

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Prevent Image Dragging</title>
   <style>
      img { 
         width: 300px; 
         height: 200px; 
         border: 2px solid #ccc;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Prevent Dragging with JavaScript</h2>
   <p>Image dragging disabled using JavaScript:</p>
   <img id="myImage" src="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt="TutorialsPoint Logo">
   <script>
      // Access the image element by ID
      var img = document.getElementById('myImage');
      // Set draggable attribute to false
      img.setAttribute('draggable', false);
   </script>
</body>
</html>

This approach is useful when you need to control dragging behavior dynamically based on user actions or application state.

Using jQuery to Prevent Dragging

jQuery provides a convenient attr() method to set the draggable attribute

<!DOCTYPE html>
<html>
<head>
   <title>jQuery Prevent Image Dragging</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
   <style>
      img { 
         width: 300px; 
         height: 200px; 
         border: 2px solid #ccc;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Prevent Dragging with jQuery</h2>
   <p>All images made non-draggable using jQuery:</p>
   <img src="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt="TutorialsPoint Logo">
   <script>
      $(document).ready(function() {
         // Set draggable attribute to false for all images
         $("img").attr("draggable", "false");
      });
   </script>
</body>
</html>

The jQuery approach is particularly useful when you want to apply the same dragging behavior to multiple images at once.

Preventing Dragging with CSS User-Select

While the draggable attribute is the standard approach, you can also use CSS to prevent text selection and reduce drag interactions

<!DOCTYPE html>
<html>
<head>
   <title>CSS User-Select Prevention</title>
   <style>
      .no-drag { 
         width: 300px; 
         height: 200px; 
         border: 2px solid #ccc;
         display: block;
         margin: 20px auto;
         user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>CSS User-Select Prevention</h2>
   <p>Image with user-select: none and draggable="false":</p>
   <img draggable="false" class="no-drag" src="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt="TutorialsPoint Logo">
</body>
</html>

The user-select: none CSS property prevents text selection, which when combined with draggable="false", provides comprehensive protection against unwanted drag interactions.

Comparison of Methods

Following table compares different approaches to prevent image dragging

Method	Implementation	Use Case	Browser Support
HTML draggable attribute	`draggable="false"`	Static images, simple prevention	All modern browsers
JavaScript setAttribute	`img.setAttribute('draggable', false)`	Dynamic control, conditional prevention	All modern browsers
jQuery attr method	`$("img").attr("draggable", "false")`	Multiple images, jQuery projects	All browsers with jQuery
CSS user-select	`user-select: none`	Additional protection, prevent text selection	Modern browsers (with prefixes)

Best Practices

Mohit Panchasara

Updated on: 2026-03-16T21:38:54+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next