<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>HTML ondragover event attribute</
title
>
<
style
>
.box {
width: 250px;
height: 100px;
margin: 15px;
padding: 5px;
border: 2px solid black;
color: Green;
}
</
style
>
<
script
>
/* Function of start drag content */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
/* Function of allow drop content */
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo").innerHTML =
"The element is OVER the droptarget.";
event.target.style.border = "3px solid green";
}
/* Function of drop content */
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById("demo").innerHTML =
"The element was dropped.";
}
</
script
>
</
head
>
<
body
>
<
center
>
<
p
>
Drag the element from top box
and drop at bottom box
</
p
>
<
div
class="box">
<
h1
ondragstart="dragStart(event)"
draggable="true" id="dragtarget">
GeeksforGeeks
</
h1
>
</
div
>
<
div
class="box" ondrop="drop(event)"
ondragover="allowDrop(event)">
</
div
>
<
p
style="clear:both;"></
p
>
<
p
id="demo"></
p
>
</
center
>
</
body
>
</
html
>