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 set whether the dragged data is copied, moved, or linked, when dropped in HTML?
The dropzone attribute in HTML5 was designed to specify how dragged data should be handled when dropped on an element. It defines whether the dropped data should be copied, moved, or linked to its original location.
Syntax
Following is the syntax for the dropzone attribute −
<element dropzone="copy | move | link">
Parameters
The dropzone attribute accepts the following values −
- copy − The drop will create a copy of the dragged element at the target location.
- move − The dragged element will be moved from its original location to the new target location.
- link − Creates a link or reference to the dragged data without copying or moving it.
Example
Following example demonstrates the intended usage of the dropzone attribute −
<!DOCTYPE html>
<html>
<head>
<title>Dropzone Attribute Example</title>
<style>
.drop-area {
width: 200px;
height: 100px;
border: 2px dashed #ccc;
margin: 10px;
padding: 20px;
text-align: center;
background-color: #f9f9f9;
}
.draggable {
width: 80px;
height: 40px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 40px;
margin: 10px;
cursor: move;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dropzone Attribute Demo</h2>
<div class="draggable" draggable="true">Drag me</div>
<div class="drop-area" dropzone="copy">
Copy Zone
<br>(dropzone="copy")
</div>
<div class="drop-area" dropzone="move">
Move Zone
<br>(dropzone="move")
</div>
<div class="drop-area" dropzone="link">
Link Zone
<br>(dropzone="link")
</div>
</body>
</html>
Browser Compatibility
The dropzone attribute has limited browser support. As of now, major browsers including Chrome, Firefox, Safari, and Edge do not fully support this attribute. The HTML5 specification included it, but browser vendors have not implemented it due to security and usability concerns.
Alternative Implementation with JavaScript
Since the dropzone attribute lacks browser support, developers typically implement drag and drop functionality using JavaScript event handlers. The dataTransfer.dropEffect property serves a similar purpose.
Example − JavaScript Drag and Drop
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Drag and Drop</title>
<style>
.drag-item {
width: 100px;
height: 50px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 50px;
margin: 10px;
cursor: move;
}
.drop-zone {
width: 200px;
height: 100px;
border: 2px dashed #bdc3c7;
margin: 10px;
padding: 20px;
text-align: center;
background-color: #ecf0f1;
}
.drag-over {
background-color: #d5dbdb;
border-color: #3498db;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Drag and Drop Implementation</h2>
<div class="drag-item" draggable="true" id="item1">Drag Me</div>
<div class="drop-zone" id="copyZone">Copy Zone</div>
<div class="drop-zone" id="moveZone">Move Zone</div>
<script>
const dragItem = document.getElementById('item1');
const copyZone = document.getElementById('copyZone');
const moveZone = document.getElementById('moveZone');
dragItem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', e.target.id);
});
[copyZone, moveZone].forEach(zone => {
zone.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = zone.id === 'copyZone' ? 'copy' : 'move';
zone.classList.add('drag-over');
});
zone.addEventListener('dragleave', function() {
zone.classList.remove('drag-over');
});
zone.addEventListener('drop', function(e) {
e.preventDefault();
const draggedId = e.dataTransfer.getData('text/plain');
const draggedElement = document.getElementById(draggedId);
if (zone.id === 'copyZone') {
const clone = draggedElement.cloneNode(true);
clone.id = 'copy-' + Date.now();
zone.appendChild(clone);
zone.innerHTML = 'Item Copied!';
} else {
zone.appendChild(draggedElement);
zone.innerHTML = 'Item Moved!';
}
zone.classList.remove('drag-over');
});
});
</script>
</body>
</html>
This working example demonstrates how to implement copy and move operations using JavaScript event handlers instead of the unsupported dropzone attribute.
DataTransfer dropEffect Property
The JavaScript dataTransfer.dropEffect property provides similar functionality to the dropzone attribute −
e.dataTransfer.dropEffect = "copy"; // Shows copy cursor e.dataTransfer.dropEffect = "move"; // Shows move cursor e.dataTransfer.dropEffect = "link"; // Shows link cursor e.dataTransfer.dropEffect = "none"; // Shows not-allowed cursor
| Approach | Browser Support | Implementation |
|---|---|---|
| dropzone attribute | No major browser support | Simple HTML attribute |
| JavaScript drag events | All modern browsers | Requires JavaScript event handling |
| dataTransfer.dropEffect | All modern browsers | JavaScript property for visual feedback |
Conclusion
While the HTML5 dropzone attribute was designed to specify drag and drop behavior, it lacks browser support. Developers should use JavaScript event handlers with dataTransfer.dropEffect to implement functional drag and drop operations that work across all modern browsers.
123 Views
