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
What are the DataTransfer object attributes?
The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set using various attributes and methods associated with the DataTransfer object.
The DataTransfer object is automatically created by the browser during drag and drop operations and is available through the event object in drag event handlers.
DataTransfer Attributes and Methods
| Property/Method | Description |
|---|---|
| dropEffect |
dataTransfer.dropEffect [ = value ]
|
| effectAllowed |
dataTransfer.effectAllowed [ = value ]
|
| types |
dataTransfer.types
Returns a DOMStringList listing the formats that were set in the dragstart event. If any files are being dragged, one of the types will be the string "Files". |
| clearData() |
dataTransfer.clearData( [ format ] )
Removes the data of the specified formats. Removes all data if the argument is omitted. |
| setData() |
dataTransfer.setData(format, data)
Adds the specified data with the given format. |
| getData() |
data = dataTransfer.getData(format)
Returns the specified data. If there is no such data, returns an empty string. |
| files |
dataTransfer.files
Returns a FileList of the files being dragged, if any. |
| setDragImage() |
dataTransfer.setDragImage(element, x, y)
Uses the given element to update the drag feedback, replacing any previously specified feedback. The x and y parameters specify the offset coordinates. |
| addElement() |
dataTransfer.addElement(element)
Adds the given element to the list of elements used to render the drag feedback. |
Example: Using DataTransfer Properties
<!DOCTYPE html>
<html>
<head>
<title>DataTransfer Example</title>
<style>
.drag-item {
width: 100px;
height: 50px;
background: lightblue;
margin: 10px;
text-align: center;
line-height: 50px;
cursor: move;
}
.drop-zone {
width: 200px;
height: 100px;
border: 2px dashed #ccc;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="drag-item" draggable="true" id="dragItem">Drag me</div>
<div class="drop-zone" id="dropZone">Drop here</div>
<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');
dragItem.addEventListener('dragstart', function(e) {
// Set data and allowed effects
e.dataTransfer.setData('text/plain', 'Hello from drag item!');
e.dataTransfer.effectAllowed = 'copy';
console.log('Types available:', e.dataTransfer.types);
console.log('Effect allowed:', e.dataTransfer.effectAllowed);
});
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log('Dropped data:', data);
dropZone.textContent = data;
});
</script>
</body>
</html>
Types available: text/plain Effect allowed: copy Dropped data: Hello from drag item!
Common Use Cases
The DataTransfer object is commonly used for:
-
File uploads - Using the
filesproperty to access dropped files -
Text/HTML transfer - Using
setData()andgetData()with different formats -
Visual feedback - Using
dropEffectandeffectAllowedto control cursor appearance -
Custom drag images - Using
setDragImage()for better user experience
Conclusion
The DataTransfer object provides essential attributes and methods for implementing drag and drop functionality. Understanding these properties allows you to create rich, interactive drag and drop interfaces with proper data transfer and visual feedback.
Updated on: 2026-03-15T23:18:59+05:30
589 Views
Advertisements