1. HTML CODE:
<! DOCTYPE html>
<title>drag</title>
<meta charset= "Utf-8" >
<script src= "Foo.js" ></script>
<style>
. box{width:400px; height:400px;}
#box1 {background-color: #cccccc; float:left;}
#box2 {background-color:aqua; float:left;}
</style>
<body>
<div id= "box1" class= "box" ></div>
<div id= "Box2" class= "box" ></div>
<div id= "MSG" ></div>
</body>
2. JS CODE:
Ondargstart >> ondragenter >> ondragover >> OnDrop
var box1div,box2div,msgdiv,img1;
Window.onload = function () {
Box1div = document.getElementById ("Box1");
Box2div = document.getElementById ("Box2");
Msgdiv = document.getElementById ("msg");
IMG1 = document.getElementById ("Img1");
Box1div.ondragenter = function (e) {//inspect event.
Showobj (e);
// }
Box1div.ondragover = function (e) {
E.preventdefault ();
}
Box2div.ondragover = function (e) {
E.preventdefault ();
}
Img1.ondragstart = function (e) {
E.datatransfer.setdata ("Imgid", "IMG1");
}
Box1div.ondrop = Dropimghandle;
Box2div.ondrop = Dropimghandle;
}
function Dropimghandle (e) {
Showobj (E.datatransfer);
E.preventdefault ();
//
var img = document.getElementById (e.datatransfer.getdata ("Imgid"));
E.target.appendchild (IMG);
}
function Showobj (obj) {
var s = "";
For (var k in obj) {
s + = k + ":" +obj[k]+ "<br>";
}
msgdiv.innerhtml = s;
}
HTML5 drag-and-drop code