HTML event attribute ondrop

The ondrop attribute event is triggered when dropping a draggable element or text selection on a droppable target.

To make an element draggable, mark that element with the global HTML5 draggable attribute.

Links and images are draggable by default.

Events fired on the draggable source element:

  • ondragstart - starting dragging
  • ondrag - during the dragging
  • ondragend - finish dragging

Events fired on the drop target:

  • ondragenter - when the dragged element enters the droppable target
  • ondragover - when the dragged element is over the droppable target
  • ondragleave - when the dragged element leaves the droppable target
  • ondrop - when the dragged element is dropped on the droppable target

What's new in HTML5

The ondrop attribute is new in HTML5.


<element ondrop="script or Javascript function name">

Supported Tags

ALL HTML elements

Browser compatibility

ondrop Yes 9.0 Yes Yes Yes


#droptarget {<!--   w  ww. jav  a  2 s.  com-->
    float: left; 
    width: 200px; 
    height: 35px;
    margin: 55px;
    margin-top: 155px;
    padding: 10px;
    border: 1px solid black;

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

function drop(event) {
    var data = event.dataTransfer.getData("Text");;


Click to view the demo