HTML DOM DragEvent


The HTML DOM DragEvent is a type of event that gets executed whenever the selected text is being dragged and dropped. This event was introduced in HTML5.

Properties

Following is the property for the HTML DOM DragEvent −

PropertyDescription
dataTransferTo return the data that is being dragged or dropped by the user.

Syntax

Following is the syntax for DragEvent −

Object.DragEventType= function_name;

Here, function_name is the function that we want to execute on the event being executed.

Events

Following are the event types belonging to the DragEvent object −

EventDescription
ondragOccurs when an element is being dragged.
ondragendOccurs when the element has been finished dragging by the user.
ondragenterOccurs when the element enters the drop target after being dragged.
ondragleaveOccurs when the element leaves the drop target while being dragged.
ondragoverOccurs when the element is over the drop target while being dragged.
ondragstartOccurs when the user starts to drag an element.
ondropOccurs when the element is dropped on the drop target after being dragged.

Example

<!DOCTYPE html>
<html>
<head>
<style>
   .DivDrop {
      float: left;
      width: 100px;
      height: 40px;
      margin:10px;
      border: 1px solid blue;
      background-color:lightgreen;
      font-weight:bold;
   }
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
   document.ondragstart = function(event) {
      event.dataTransfer.setData("Text", "spanDrag");
      document.getElementById("spanDrag").innerText="drag Text";
      document.getElementById("spanDrag").style.backgroundColor="lightgreen";
   };
   document.ondrag = function(event) {
      document.getElementById("Sample").innerHTML = "Span element is being dragged";
   };
   document.ondragover = function(event) {
      event.preventDefault();
   };
   document.ondrop = function(event) {
      event.preventDefault();
      if(event.target.className=="DivDrop"){
         var txt = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(txt));
         document.getElementById(txt).innerText="Dragged Text";
         document.getElementById(txt).style.backgroundColor="lightyellow";
         document.getElementById("Sample").innerHTML = "The span element is dropped";
      }
   };
</script>
</body>
</html>

Output

This will produce the following output −

On dragging the “Drag This!” Text.It will change to “drag Text”.

On dropping the “drag Text” in the second div −

In the above example −

We have first created two div elements with same class name “DivDrop” that will allow us to use a common css style for both of them. The first <div> element contains a <span> element inside it that we will drag later −

.DivDrop {
   float: left;
   width: 100px;
   height: 40px;
   margin:10px;
   border: 1px solid blue;
   background-color:lightgreen;
   font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>

We have then created several functions that will execute when an event occurs. The first function is associated with the ondragstart event. This event fires when the user starts to drag the text.. The function contains the setData() method that takes drag data type and data. Here the type is “text” and data is the <span> element id. You should use event.target.id to find the id associated with the <p> tag. We used the name for simplicity here −

document.ondragstart = function(event) {
   event.dataTransfer.setData("Text", "spanDrag");
   document.getElementById("spanDrag").innerText="drag Text";
   document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};

The function associated with the ondrag event sets the <p> element text to “Span element is being dragged” by using its innerHTML property after getting its id. The ondrag event fires when the text is being dragged by the user −

Document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

The function associated with ondragover event uses the event.preventDefault() method to stop the default action that would happen on dragover. The dragover event fires periodically when the element being dragged is above the intended target −

document.ondragover = function(event) {
   event.preventDefault();
};

The function associated with the ondrop event prevents the default action to occur. It then checks if the intended target is the second <div> element or not. Without checking what element it is it can place the text anywhere on page which can affect the appearance of the web page.

We then get drag data for the type “text” using the getData() method. That element would be <span> in our case and we then append the <span> element as the child of second div and change its inner text, background color to reflect the changes −

document.ondrop = function(event) {
   event.preventDefault();
   if(event.target.className=="DivDrop"){
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText="Dragged Text";
      document.getElementById(txt).style.backgroundColor="lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
   }
raja
Published on 08-Aug-2019 14:19:54
Advertisements