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
HTML ondrag Event Attribute
The ondrag event attribute in HTML is triggered continuously while an element is being dragged. This event fires repeatedly during the drag operation, making it useful for providing real-time feedback or updating the interface while dragging is in progress.
By default, HTML images and links are draggable without requiring the draggable="true" attribute. For other elements like <div>, <p>, or <span>, you must explicitly set draggable="true" to make them draggable.
Syntax
Following is the syntax for the ondrag event attribute −
<element ondrag="script">Content</element>
Parameters
- script − JavaScript code to execute when the element is being dragged. This can be a function call or inline JavaScript.
How Drag Events Work
The HTML drag and drop API involves several events that occur in sequence −
- ondragstart − Triggered when the user starts dragging an element
- ondrag − Triggered repeatedly while the element is being dragged
- ondragend − Triggered when the drag operation is complete
- ondragenter − Triggered when a dragged element enters a drop target
- ondragover − Triggered when a dragged element is over a drop target
- ondrop − Triggered when the dragged element is dropped
Example − Basic Ondrag Event
Following example demonstrates the ondrag event with real-time feedback while dragging −
<!DOCTYPE html>
<html>
<head>
<title>HTML ondrag Event Attribute</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
.draggable {
width: 100px; height: 100px; background: #e74c3c;
border-radius: 50%; margin: 20px; cursor: move;
display: flex; align-items: center; justify-content: center;
color: white; font-weight: bold;
}
.drop-zone {
width: 200px; height: 150px; border: 3px dashed #3498db;
margin: 20px; padding: 10px; text-align: center;
background: white; border-radius: 8px;
}
.feedback {
padding: 10px; margin: 10px 0; font-size: 16px;
background: #ecf0f1; border-radius: 5px; min-height: 20px;
}
</style>
</head>
<body>
<h2>HTML ondrag Event Demo</h2>
<div class="draggable"
draggable="true"
ondragstart="handleDragStart(event)"
ondrag="handleDrag(event)"
ondragend="handleDragEnd(event)">
Drag Me
</div>
<div class="drop-zone"
ondragover="allowDrop(event)"
ondrop="handleDrop(event)">
Drop Zone
</div>
<div class="feedback" id="feedback">Drag the red circle to see events in action</div>
<script>
function handleDragStart(event) {
document.getElementById('feedback').textContent = 'Drag started!';
event.dataTransfer.setData('text/plain', 'dragged-element');
}
function handleDrag(event) {
document.getElementById('feedback').textContent = 'Dragging in progress... (ondrag firing)';
}
function handleDragEnd(event) {
document.getElementById('feedback').textContent = 'Drag operation ended';
}
function allowDrop(event) {
event.preventDefault();
}
function handleDrop(event) {
event.preventDefault();
document.getElementById('feedback').textContent = 'Element was dropped!';
}
</script>
</body>
</html>
The output shows a draggable red circle and a drop zone. The feedback area continuously updates to show "Dragging in progress..." while the ondrag event fires −
HTML ondrag Event Demo [Red Circle: "Drag Me"] [Blue Dashed Box: "Drop Zone"] Feedback: "Drag started!" ? "Dragging in progress... (ondrag firing)" ? "Element was dropped!"
Example − Drag Counter
This example shows how to use the ondrag event to count how many times the event fires during a single drag operation −
<!DOCTYPE html>
<html>
<head>
<title>Ondrag Event Counter</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #f8f9fa; }
.drag-item {
width: 80px; height: 80px; background: #28a745;
margin: 15px; padding: 10px; color: white; text-align: center;
border-radius: 10px; cursor: move; font-size: 12px;
}
.counter {
font-size: 18px; padding: 15px; background: #17a2b8; color: white;
border-radius: 5px; margin: 10px 0; text-align: center;
}
</style>
</head>
<body>
<h2>Ondrag Event Counter</h2>
<div class="drag-item"
draggable="true"
ondragstart="resetCounter()"
ondrag="incrementCounter()">
Drag to Count
</div>
<div class="counter" id="counter">
Ondrag fired: 0 times
</div>
<script>
let dragCount = 0;
function resetCounter() {
dragCount = 0;
document.getElementById('counter').textContent = 'Ondrag fired: 0 times';
}
function incrementCounter() {
dragCount++;
document.getElementById('counter').textContent = `Ondrag fired: ${dragCount} times`;
}
</script>
</body>
</html>
During a single drag operation, the ondrag event typically fires dozens of times, demonstrating how frequently this event occurs −
Ondrag Event Counter [Green Box: "Drag to Count"] Counter: "Ondrag fired: 47 times" (example count after dragging)
Example − Coordinate Tracking
The ondrag event can also be used to track mouse coordinates during the drag operation −
<!DOCTYPE html>
<html>
<head>
<title>Drag Coordinate Tracking</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.tracker {
width: 120px; height: 60px; background: #6f42c1;
color: white; text-align: center; line-height: 60px;
border-radius: 8px; cursor: move; margin: 20px;
}
.coordinates {
padding: 15px; background: #e9ecef; border-radius: 5px;
font-family: monospace; font-size: 14px; margin: 10px 0;
}
</style>
</head>
<body>
<h2>Mouse Coordinate Tracking</h2>
<div class="tracker"
draggable="true"
ondrag="trackCoordinates(event)">
Track Position
</div>
<div class="coordinates" id="coords">
Mouse position: X: 0, Y: 0
</div>
<script>
function trackCoordinates(event) {
// Note: clientX and clientY may be 0 during ondrag in some browsers
const x = event.clientX || 0;
const y = event.clientY || 0;
document.getElementById('coords').textContent = `Mouse position: X: ${x}, Y: ${y}`;
}
</script>
</body>
</html>
This example tracks mouse coordinates during dragging, though note that some browsers may return 0 for coordinates during the ondrag event −
Mouse Coordinate Tracking [Purple Box: "Track Position"] Mouse position: X: 245, Y: 156 (updates continuously while dragging)
Browser Compatibility
The ondrag event is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, there are some implementation differences −
- Some browsers may not provide accurate
clientXandclientYcoordinates during the ondrag event - The frequency of ondrag event firing may vary between browsers
- Mobile browsers have limited drag and drop support
Common Use Cases
- Progress indicators − Show drag progress or status updates
- Visual feedback − Change cursor appearance or highlight drop zones
- Validation − Check if the dragged element can be dropped at the current location
- Animation − Create smooth drag animations or effects
- Data updates − Update application state during the drag operation
Conclusion
The HTML ondrag event attribute provides real-time feedback during drag operations by firing continuously while an element is being dragged. It is particularly useful for creating interactive drag-and-drop interfaces with live updates and visual feedback. Remember to combine it with other drag events like ondragstart and ondragend for complete drag-and-drop functionality.
218 Views
