Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make an image draggable in HTML?
The ability to create draggable elements within a web page is one of the new features that HTML5 offers for web developers. It becomes a very popular and widely utilized feature. It simply means to move an image to another location by dragging it there with the cursor. By employing mouse or touch motions, users can drag an image or other content around the page.
Making any HTML5 element draggable, including images, is straightforward using the draggable attribute. It accepts the values true, false, or auto. The default value is auto, where the browser determines if an element is draggable. When set to true, the image becomes draggable. When set to false, the image is not draggable.
Syntax
Following is the syntax for the draggable attribute
<elementTag draggable="true|false|auto">
Attribute Values
The draggable attribute accepts the following values
true Element can be dragged
false Element cannot be dragged
auto Browser determines draggability (default behavior)
Note Images and links are draggable by default in most browsers, but explicitly setting draggable="true" ensures consistent behavior across all browsers.
Using Simple HTML
The simplest way to make an image draggable is to add the draggable="true" attribute to the <img> tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Draggable Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Draggable Image Example</h1>
<p>Try dragging the image below:</p>
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
alt="TutorialsPoint Logo"
draggable="true"
style="width: 200px; border: 1px solid #ccc;">
</body>
</html>
The output shows a draggable image that can be moved around the page
Draggable Image Example Try dragging the image below: [TutorialsPoint Logo Image - draggable]
Using HTML with CSS Styling
We can enhance the appearance of draggable images using CSS styles and make them responsive for different screen sizes.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Draggable Image</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.image-container {
margin: 20px auto;
display: inline-block;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.draggable-image {
width: 300px;
border: 3px solid #4CAF50;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
cursor: move;
transition: transform 0.2s ease;
}
.draggable-image:hover {
transform: scale(1.05);
}
/* Responsive design for mobile devices */
@media only screen and (max-width: 768px) {
.draggable-image {
width: 250px;
}
}
@media only screen and (max-width: 480px) {
.draggable-image {
width: 200px;
}
}
</style>
</head>
<body>
<h1>Styled Draggable Image</h1>
<p>This image is draggable with enhanced styling:</p>
<div class="image-container">
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
alt="TutorialsPoint Logo"
class="draggable-image"
draggable="true">
</div>
<p>Try dragging the image around the page!</p>
</body>
</html>
The output displays a styled draggable image with hover effects and responsive design
Styled Draggable Image This image is draggable with enhanced styling: [Enhanced TutorialsPoint Logo - styled with green border, rounded corners, shadow] Try dragging the image around the page!
Making Images Non-Draggable
Sometimes you may want to prevent images from being dragged. This can be achieved by setting draggable="false".
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Non-Draggable Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Draggable vs Non-Draggable Images</h1>
<div style="margin: 20px;">
<h3>Draggable Image</h3>
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
alt="Draggable Image"
draggable="true"
style="width: 150px; border: 2px solid green; margin: 10px;">
</div>
<div style="margin: 20px;">
<h3>Non-Draggable Image</h3>
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
alt="Non-Draggable Image"
draggable="false"
style="width: 150px; border: 2px solid red; margin: 10px;">
</div>
<p>Try dragging both images to see the difference!</p>
</body>
</html>
The output shows two images where only the first one can be dragged
Draggable vs Non-Draggable Images Draggable Image [Image with green border - can be dragged] Non-Draggable Image [Image with red border - cannot be dragged] Try dragging both images to see the difference!
Browser Compatibility
The draggable attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, the drag behavior may vary slightly between browsers, especially on mobile devices.
| Browser | Support | Notes |
|---|---|---|
| Chrome | Yes | Full support for desktop and mobile |
| Firefox | Yes | Full support for desktop and mobile |
| Safari | Yes | Limited touch drag support on iOS |
| Edge/IE | Yes (IE 9+) | Good support on desktop |
Key Points
Images and links are draggable by default in most browsers
Use
draggable="true"to ensure consistent draggable behaviorUse
draggable="false"to prevent elements from being draggedThe drag behavior is primarily visual - elements return to their original position unless combined with drag-and-drop JavaScript events
For full drag-and-drop functionality, you need to implement JavaScript event handlers like
ondragstart,ondrop, etc.
Conclusion
Making images draggable in HTML is simple using the draggable attribute. Set it to true to enable dragging, false to disable it, or leave it as auto for default browser behavior. While this provides basic drag functionality, implementing full drag-and-drop features requires additional JavaScript event handling for practical applications.
2K+ Views
