html tutorial - ondrop Attribute in HTML - html5 - html code - html form
Learn html - html tutorial - Ondrop attribute in html - html examples - html programs
- The ondrop attribute triggers when a draggable element dropped on a valid drop target.
- Many events triggers during the drag and drop operation.
Syntax for ondrop attribute in HTML:
<element ondrop="script">Difference between HTML 4.01 and HTML 5 for ondrop Attribute:
HTML 4.01
- HTML 4 does not support ondrop attribute.
HTML 5
- HTML 5 supports ondrop attribute.
Applies To:
| Element | Attribute |
|---|---|
| All HTML elements | ondrop |
ondrop Attribute Values:
| Value | Description |
|---|---|
| script | The script to be run on ondrop |
Sample Coding for ondrop Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy ondrop attribute</title>
<style>
.drag_div {
width: 100px;
height: 35px;
padding: 10px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<p>Drag the element: </p>
<div class="drag_div" ondrop="drop(event)"
ondragover ="dragOver(event)">
<p draggable="true" ondragstart="dragStart(event)" id ="dragtarget">
Drag me!</p>
</div><br>
<div class="drag_div" ondrop="drop(event)"
ondragover ="dragOver(event)">
</div>
<p id="drag"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("drag").innerHTML="The element
was dropped";
}
</script>
</body>
</html>Code Explanation for ondrop Attribute in HTML:
- ondrop attribute used to trigger an event when the element dropped on a valid drop target.
- ondragover attribute used to trigger an event when the element dragged over the valid drop target.
- ondragstart attribute used to trigger an event when dragging operation starts.
- dragStart JavaScript function get the text of the dragged element.
- dragOver JavaScript function used to set the element properties as default in new drop position.
- drop JavaScript function used to set the element properties as default in new valid drop position.
- Get the text in the dropped element.
- Append the text to the new valid drop point.
- innerHTML of <p> tag which has id “drag” as “The element was dropped”.
Output for ondrop Attribute in HTML:
- The output shows Drag me! Text. We can drag the text.
- The element being drag and dropped to the valid target the event triggers and the output shows “The element was dropped”.
Browser Support for ondrop Attribute in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |