HTML ondrag Event Attribute

Description

The ondrag HTML event attribute fires when an element or text selection is being dragged. It is one of several event attributes that are used in the HTML5 drag-and-drop API.

To use the ondrag attribute, you first need to set the draggable attribute on the element that you want to be draggable. Once you have done this, you can add the ondrag attribute to the element and specify a JavaScript function that will be executed when the element is being dragged.

The JavaScript function that you specify for the ondrag attribute will be passed an event object that contains information about the drag operation. This information includes the following:

The current position of the pointer relative to the element being dragged.
The offset of the pointer relative to the element being dragged when the drag operation started.
The element being dragged.

You can use this information to perform various tasks, such as updating the position of the element being dragged, displaying a visual feedback to the user, or preventing the user from dragging the element to certain areas of the page.

Here is an example of how to use the ondrag attribute:

<div id="draggable" draggable="true" ondrag="myDragFunction(event)">
  This element is draggable!
</div>

function myDragFunction(event) {
  // Get the current position of the pointer relative to the element being dragged.
  var pointerX = event.clientX;
  var pointerY = event.clientY;

  // Update the position of the element being dragged.
  document.getElementById('draggable').style.left = pointerX + 'px';
  document.getElementById('draggable').style.top = pointerY + 'px';
}

In this example, the myDragFunction() function will be executed every time the #draggable element is being dragged. The function will update the position of the #draggable element to the current position of the pointer.

In HTML5, seven event attributes were added that are used at various stages of the drag and drop operation:

Events that occur with the drag object:

ondragstart (triggered at the beginning of an item drag operation).
ondrag (triggered when an item is dragged).
ondragend (triggered when the user has finished dragging and dropping the item).

Events that occur with the object being dragged onto:

ondragenter (when the item will be transferred to the specified zone (target for transfer)).
ondragover (triggered when an element is moved over a valid transfer zone).
ondragleave (triggered when an element leaves an acceptable zone for transfer).
ondrop (triggered after the dragged item descends on the drag object).

Syntax

<element ondrag="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

Consider an example in which the <p> element can be moved between two <div> blocks. To do this, we will set four event attributes on the <div> blocks and three on the moveable <p> paragraph.

When we start moving the <p> element, two events are triggered: the first is triggered at the beginning of the operation of dragging the element with the mouse (ondragstart), on which we installed a script that allows you to store data and its type (setData method), the second ondrag event fires at the moment the drag started and informs us of this in the <p id="info"> </p> element.

By default, items cannot be placed in other items. To make this accessible (canceling the default browser) we use the preventDefault() method, which is triggered when an element is moved over a valid zone for transfer (the ondragover event attribute)

ondragenter event occurs when the element is moved to the specified zone, and a script is triggered that sets the background color to yellow and the dashed border to black. When an element leaves a given zone, the border and background style values are returned to their original form (ondragleave event)

The example uses two more event attributes: the first is ondrop, which is triggered when an element descends onto a drag object, a script is launched that allows you to receive data (getData method) and the second attribute of events is ondragend, which is triggered when the user has finished dragging and dropping the element and runs a script that informs us about the completion of the drag and drop procedure in the <p id="info"> </p> element.

HTML

<!DOCTYPE html> 

  <html> 

  <head>

    <title>Attributes for mouse events.  Drag and drop.</title> 

    <style> 

    .dragndrop {

      width: 200px;

      height: 50px;

      border: 3px solid orange;

      padding: 30px;

      text-align: center;

      background: cornsilk;

      float: left;

      margin-right: 20px;

    }

    </style> 

  </head> 

  <body> 

  <p>Move the HTML &lt;p&gt; element between the two rectangles:</p> 

  <div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"> 

  <p ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="dragEnd(event)" draggable="true" id="anyid">Move me!</p> 

  </div> 

  <div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> 

  <p id="info"> </p> 

<script>

function dragStart ( event ) { 

  event.dataTransfer.setData( "Text" , event.target.id);  

} 

function dragging ( event ) { 

  document.getElementById("info").innerHTML = "The &lt;p&gt; element is being dragged (ondrag)"; 

} 

function allowDrop ( event ) { 

  event.preventDefault();  

} 

function dragEnter ( event ) { 

  if (event.target.className == "dragndrop") { 

    event.target.style.background = "yellow"; 

    event.target.style.border = "3px dotted black"; 

  } 

} 

function dragLeave ( event ) { 

  if (event.target.className == "dragndrop") { 

    event.target.style.background = ""; 

    event.target.style.border = ""; 

  } 

} 

function drop ( event ) { 

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

  event.target.appendChild(document.getElementById(data));

} 

function dragEnd ( event ) { 

  document.getElementById("info").innerHTML="Draggable &lt;p&gt; element dropped onto the drag object (ondragend)"; 

}

</script> 

  </body> 

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML ondrag event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.