HTML DOM ondragstart Event
Last Updated :
13 Sep, 2023
The HTML DOM ondragstart Event occurs when a draggable element starts drag.
There are some events that are used and occurred in the different stages of a drag and drop operation:
Events fired on the draggable target:
- ondragstart: occurs when dragging of an element started.
- ondrag: occurs while an element is dragging.
- ondragend: occurs when dragging of an element finished.
Events fired on the drop target:
- ondragenter: occurs when the dragged element entered into the drop target.
- ondragover: occurs when the dragged element is over the drop target.
- ondragleave: occurs when the dragged element leaves from the drop target.
- ondrop: occurs when the dragged element is dropped on the drop target.
Syntax:
<element ondragstart="myScript">
object.ondragstart = function(){myScript};
- In JavaScript, using the addEventListener() method:
object.addEventListener("dragstart", myScript);
Note: Links and images are draggable by default.
Example 1:
html
<!DOCTYPE HTML>
< html >
< head >
< title >HTML DOM ondrop Event</ title >
< style >
.droptarget {
float: center;
width: 300px;
height: 50px;
margin: 20px;
padding: 5px;
border: 6px solid green;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM ondrop Event</ h2 >
< div class = "droptarget"
ondrop = "dropEle(event)"
ondragover = "allowDropEle(event)" >
< p ondragstart = "dragStartEle(event)"
draggable = "true"
id = "dragtarget" >
Draggable element
</ p >
</ div >
< div class = "droptarget"
ondrop = "dropEle(event)"
ondragover = "allowDropEle(event)" >
</ div >
< p id = "demo" ></ p >
< script >
function dragStartEle(event) {
event.dataTransfer.setData(
"Text", event.target.id);
document.getElementById(
"demo").innerHTML = "Dragging starts";
}
function allowDropEle(event) {
event.preventDefault();
}
function dropEle(event) {
event.preventDefault();
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById("demo").innerHTML =
"Element dropped";
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE HTML>
< html >
< head >
< title >
HTML DOM ondrop Event
</ title >
< style >
.droptarget {
float: center;
width: 300px;
height: 50px;
margin: 20px;
padding: 5px;
border: 6px solid green;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM ondrop Event</ h2 >
< div class = "droptarget" >
< p draggable = "true"
id = "dragtarget" >
Draggable element
</ p >
</ div >
< div class = "droptarget" >
</ div >
< p id = "demo" ></ p >
< script >
// Event fired on the drag target
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Dragging starts";
};
// Events fired on the drop target
document.ondragover = function(event) {
event.preventDefault();
};
document.ondrop = function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "Element dropped";
};
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 3:
html
<!DOCTYPE HTML>
< html >
< head >
< title >HTML DOM ondrop Event</ title >
< style >
.droptarget {
float: center;
width: 300px;
height: 50px;
margin: 20px;
padding: 5px;
border: 6px solid green;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM ondrop Event</ h2 >
< div class = "droptarget" >
< p draggable = "true" id = "dragtarget" >
Draggable element</ p >
</ div >
< div class = "droptarget" ></ div >
< p id = "demo" ></ p >
< script >
// Event fired on the drag target
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Dragging starts";
});
// Events fired on the drop target
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.addEventListener("drop", function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "Element dropped";
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by HTML DOM ondragstart Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...