HTML event attribute ondrag

The ondrag attribute event is triggered when dragging an element or text selection.

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 ondrag attribute is new in HTML5.


<element ondrag="script">

Supported Tags

ALL HTML elements

Browser compatibility

ondrag Yes 9.0 Yes Yes Yes


.droptarget {<!--  w ww . jav a  2 s  .co m-->
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid red;

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

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

function dragStart(event) {

function dragging(event) {
    console.log("being dragged");

function allowDrop(event) {

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


Click to view the demo