HTML ondrop Attribute

HTML ondrop Attribute: This attribute is defined as it fires when an element is dragged and dropped on a valid drop target. The drag and drop is the common feature of HTML 5. And by default, the images and links are draggable. There are different events which are used and occur before the ondrop event.

  • Events occur on the draggable target
  • Events occur on the drop target.

HTML ondrop Attribute

This attribute can be applied to all the HTML elements.

Events occur on the draggable target

There are three events which are used to drag an element from the source location.



EVENT FUNCTIONALITY
ondragstart It is used when the user starts to drag an element
ondrag used to dragging an element
ondragend used to finish the dragging of an element.

Events occur on the drop of the target

The list of events which are used to drop an element is given below:

EVENT FUNCTIONALITY
ondragenter dragged an element and enter into the valid drop target.
ondragover when the dragged element is over the drop location.
ondragleave when the dragged element leaves the drop target

 Browser Support

This attribute is supported by the following browsers:

  • Chrome-4.0
  • Firefox-3.5
  • Internet Explorer-9.0
  • Safari-6.0
  • Opera-12.0

Example: for <div> element

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;"></p>

<p id="demo"></p>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  document.getElementById("demo").innerHTML = "Started to drag the p element";
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>

</body>
</html>

Output:

HTML ondrop attribute