Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent dragging of ghost image?
By default, we can drag all the HTML elements by clicking on them. However, users should not be able to drag the non-draggable element. Otherwise, they can’t be able to differentiate between the draggable and non-draggable elements, as all elements are draggable.
The images are also draggable on the web page. In this tutorial, we will learn various ways to prevent the dragging of ghost images.
Example 1 (Dragging the Image)
In this example, we added the image to the web page. Also, we set the dimensions for the image using the CSS. In the output, users can try to drag the image and observe that image is draggable.
<html>
<head>
<style>
img { width: 300px; height: 300px;}
</style>
</head>
<body>
<h2> Dragging the <i> images </i> in HTML5 </h2>
<img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" alt = "image">
</body>
</html>
Syntax
Users can follow the syntax below to use the draggable attribute to prevent dragging the ghost image.
<img draggable = "false" src = "URL" alt = "image">
In the above syntax, we used the ‘draggable’ attribute with the HTML ‘img’ element.
Example 2 (Prevent Dragging the Image)
In the example below, we added the image to the web page. Also, we added the ‘draggable’ attribute with a ‘false’ value in the ‘img’ element.
In the output, users can try to drag the image and observe that image is not draggable.
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h2> Preventing the dragging the <i> images </i> in HTML5 </h2>
<img draggable = "false" src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
</body>
</html>
Example 3 (Using the JavaScript to Prevent Dragging the Image)
In this example, we use JavaScript to prevent from dragging the ghost image. In JavaScript, we access the image element, and use the setAttribute() method to set the draggable attribute for the image element.
Here, we have passed the ‘draggable’ as the first parameter and ‘false’ as a second parameter of the ‘setAttribute’ method.
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using JavaScript </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
<script>
var img = document.getElementsByTagName('img')[0];
// add draggable = false to the image
img.setAttribute('draggable', false);
</script>
</body>
</html>
Example (Using the JQuery to Prevent Dragging the Image)
In the example below, we used JQuery to prevent from dragging the ghost image on the web page. Here, we accessed the image element using the tag name and used the attr() method to set the draggable attribute with the false value. In the output, we can see that we can’t drag the image.
<html>
<head>
<style>
img {
width: 300px;
height: 300px;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using jQuery </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" alt = "image">
<script>
// adding draggable attribute to the image using JQuery
$("img").attr("draggable", "false");
</script>
</body>
</html>
We learned to prevent ghost images from dragging on the web page. We used the ‘draggable’ attribute to achieve our goal. In the 3rd and 4th examples, we used JavaScript and JQuery to set the draggable attribute for the image element.
Users can use the draggable attribute with any HTML element to prevent dragging that element.
421 Views
