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
Selected Reading
DataTransfer object in HTML5
The DataTransfer object is a key component of HTML5 drag and drop functionality. It provides methods to store and retrieve data during drag operations and control the visual feedback shown to users.
Accessing the DataTransfer Object
All drag and drop event handlers receive an Event object with a readonly dataTransfer property that returns the DataTransfer object associated with the event:
function dragStartHandler(event) {
let dataTransfer = event.dataTransfer;
// Use dataTransfer methods here
}
Key DataTransfer Methods
The DataTransfer object provides several important methods:
- setData(format, data) - Stores data for the drag operation
- getData(format) - Retrieves data during drop
- setDragImage(element, x, y) - Sets custom drag image
- effectAllowed - Specifies allowed drag effects
Complete Drag and Drop Example
<!DOCTYPE html>
<html>
<head>
<style>
#boxA, #boxB {
float: left;
padding: 10px;
margin: 10px;
user-select: none;
}
#boxA {
background-color: #6633FF;
width: 75px;
height: 75px;
color: white;
cursor: move;
}
#boxB {
background-color: #FF6699;
width: 150px;
height: 150px;
border: 2px dashed #333;
}
.drag-over {
background-color: #FFD700 !important;
}
</style>
</head>
<body>
<center>
<h2>HTML5 DataTransfer Demo</h2>
<p>Drag the purple box to the drop zone</p>
<div id="boxA" draggable="true">
<p>Drag Me</p>
</div>
<div id="boxB">
<p>Drop Zone</p>
</div>
</center>
<script>
// Drag start event
document.getElementById('boxA').addEventListener('dragstart', function(ev) {
// Store data in DataTransfer object
ev.dataTransfer.setData('text/plain', ev.target.id);
ev.dataTransfer.effectAllowed = 'move';
// Optional: Set custom drag image
ev.dataTransfer.setDragImage(ev.target, 0, 0);
console.log('Drag started for:', ev.target.id);
});
// Drag over event (required for drop)
document.getElementById('boxB').addEventListener('dragover', function(ev) {
ev.preventDefault(); // Allow drop
ev.target.classList.add('drag-over');
});
// Drag leave event
document.getElementById('boxB').addEventListener('dragleave', function(ev) {
ev.target.classList.remove('drag-over');
});
// Drop event
document.getElementById('boxB').addEventListener('drop', function(ev) {
ev.preventDefault();
// Retrieve data from DataTransfer object
let draggedElementId = ev.dataTransfer.getData('text/plain');
let draggedElement = document.getElementById(draggedElementId);
// Move the element
ev.target.appendChild(draggedElement);
ev.target.classList.remove('drag-over');
console.log('Element dropped:', draggedElementId);
});
</script>
</body>
</html>
DataTransfer Properties
| Property | Description | Values |
|---|---|---|
effectAllowed |
Allowed drag effects | 'copy', 'move', 'link', 'all' |
dropEffect |
Current drop effect | 'copy', 'move', 'link', 'none' |
files |
File list for file drops | FileList object |
Data Format Types
Common data formats used with setData() and getData():
- text/plain - Plain text data
- text/html - HTML content
- text/uri-list - URL data
- application/json - JSON data
Conclusion
The DataTransfer object is essential for HTML5 drag and drop operations. It allows you to store data, control drag effects, and customize the drag experience. Use setData() on dragstart and getData() on drop to transfer information between elements.
Updated on: 2026-03-15T23:18:59+05:30
448 Views
Advertisements