<!DOCTYPE HTML>
<
html
>
<
head
>
<
style
>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
margin-right: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"droptarget"
ondrop
=
"drop(event)"
ondragenter
=
"dragEnter(event)"
ondragleave
=
"dragLeave(event)"
ondragover
=
"allowDrop(event)"
>
<
p
ondragstart
=
"dragStart(event)"
draggable
=
"true"
id
=
"dragtarget"
>
Drag me!
</
p
>
</
div
>
<
div
class
=
"droptarget"
ondragenter
=
"dragEnter(event)"
ondragleave
=
"dragLeave(event)"
ondrop
=
"drop(event)"
ondragover
=
"allowDrop(event)"
>
</
div
>
<
p
style
=
"clear:both;"
></
p
>
<
p
id
=
"demo"
></
p
>
<
script
>
function dragStart(event) {
//element being dragged
event.dataTransfer.setData
("Text", event.target.id);
}
function dragEnter(event) {
if (event.target.className == "droptarget") {
//entering the dropzone
document.getElementById("demo").innerHTML =
"Entered the dropzone";
event.target.style.backgroundColor =
"lightyellow";
}
}
function dragLeave(event) {
if (event.target.className == "droptarget") {
//leaving the dropzone
document.getElementById("demo").innerHTML =
"Left the dropzone";
event.target.style.backgroundColor = "";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
// element being dropped
event.preventDefault();
event.target.style.backgroundColor = "";
var data = event.dataTransfer.getData
("Text");
event.target.appendChild(
document.getElementById(data));
}
</
script
>
</
body
>
</
html
>