HTML ondragstart Event Attribute is used when the user wants to drag the text or element. It is simply the process in which we press on the desired text to drag and drop them to a different location.
Basically, it Initiates when the user starts dragging an element and is used to set data to be transferred or apply visual effects during drag start. It also Facilitates the creation of dynamic and interactive drag-and-drop interfaces in HTML.
Syntax
<element ondragstart="script">DRAG & DROP process includes many operations
- Operations used to the draggable target
|
Operations |
Descriptions |
|---|---|
|
It is used when an element is being dragged |
|
|
It is used when the user starts to drag an element |
|
|
It is used when the user has finished dragging the element |
- Operations used to the drop target
|
Operations |
Operations |
|---|---|
|
It is used when the dragged element is dropped on the drop target |
|
|
It is used when the dragged element is over the drop target |
|
|
It is used when the dragged element leaves the drop target |
|
|
It is used when the dragged element enters the drop target |
Example 1: In this example we will return when the element dragged and dropped.
<!DOCTYPE HTML><html>
<head>
<style>
.droptarget {
float: CENTRE;
width: 150px;
height: 45px;
margin: 25px;
padding: 15px;
border: 2px solid LIGHTGREEN;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
HTML | ondragend Event Attribute
</h3>
<div class="droptarget"
ondrop="drop(event)"
ondragover="allowDrop(event)">
<!-- ondragstart script -->
<p ondragstart="dragStart(event)"
ondrag="dragging(event)"
ondragend="dragEnd(event)" draggable="true"
id="dragtarget">
PRESS & DRAG
</p>
</div>
<div class="droptarget" ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData(
"Text", event.target.id);
}
function dragging(event) {
document.getElementById(
"demo").innerHTML = "Dragging";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById(
"demo").innerHTML =
"Dropped";
}
function dragEnd(event) {
document.getElementById("demo").
innerHTML = "Drag ended";
}
</script>
</body>
</html>
|
Output:
Example 2: In this example we will see the implementation of above tag with alert button.
<!DOCTYPE HTML><html>
<head>
<style>
.droptarget {
float: CENTRE;
width: 150px;
height: 45px;
margin: 25px;
padding: 15px;
border: 2px solid LIGHTGREEN;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
HTML | ondragend Event Attribute
</h3>
<div class="droptarget"
ondrop="drop(event)"
ondragover="allowDrop(event)">
<!-- ondragstart script -->
<p ondragstart="dragStart(event)"
ondrag="dragging(event)"
ondragend="dragEnd(event)" draggable="true"
id="dragtarget">
PRESS & DRAG
</p>
</div>
<div class="droptarget" ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData(
"Text", event.target.id);
}
function dragging(event) {
document.getElementById(
"demo").innerHTML = "Dragging";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById(
"demo").innerHTML =
"Dropped";
}
function dragEnd(event) {
alert("ondragend Event Attribute Triggered")
document.getElementById("demo").
innerHTML = "Drag ended";
}
</script>
</body>
</html>
|
Output:
Supported Browsers
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 9and above
- Opera 12 and above
- Safari 3.1 and above