Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
| Property | Description |
|---|---|
| dataTransfer | To 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 −
| Event | Description |
|---|---|
| ondrag | Occurs when an element is being dragged. |
| ondragend | Occurs when the element has been finished dragging by the user. |
| ondragenter | Occurs when the element enters the drop target after being dragged. |
| ondragleave | Occurs when the element leaves the drop target while being dragged. |
| ondragover | Occurs when the element is over the drop target while being dragged. |
| ondragstart | Occurs when the user starts to drag an element. |
| ondrop | Occurs 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";
}
159 Views
