1. HTML CODE:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="html.png">
<div id="msg"></div>
</body>
</html>
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;
}