效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
}
#box{
background-color: gray;
}
img{
}
</style>
<script src="js.js"></script>
</head>
<body>
<div id="box" class="box"></div>
<div id="box1" class="box"></div>
<img id="image" src="1.png">
<div id="msg"></div>
</body>
</html>
JS:js.js
/**
* Created by Doron on 16/6/24.
*/
var box1,img,boxMsg,box2;
window.onload= function (){
box1 = document.getElementById("box");
box2 = document.getElementById("box1");
boxMsg = document.getElementById("msg");
img = document.getElementById("image");
// box1.ondragenter = function (e) {
//
// meg(e);
// }
box1.ondragover = function (e) {
e.preventDefault();
}
box2.ondragover = function (e) {
e.preventDefault();
}
img.ondragstart = function (e) {
e.dataTransfer.setData("imageID","image");
}
box1.ondrop = dadad;
box2.ondrop = dadad;
}
function dadad(e) {
meg(e.dataTransfer);
e.preventDefault();
var image = document.getElementById(e.dataTransfer.getData("imageID"));
e.target.appendChild(image);
}
// 监听事件
function meg(obj) {
var s = "";
for(var k in obj){
s += k+":"+obj[k]+"<br/>";
}
boxMsg.innerHTML = s;
}