<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1,#div2{350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}
#div2{margin-top: 50px;}
div img{
height: 130px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">
<!--为了让元素可拖动，设置 draggable='true'-->
<img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script>
//ondragover-- 在拖动的时候阻止浏览器默认事件
function allowDrop(ev){
ev.preventDefault();
}
function allowDrop1(ev){
ev.preventDefault();
}
//ondragstart 拖动开始的时候触发该事件
function drag(e){
//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
e.dataTransfer.setData("Text",e.target.id);
//数据类型是 "Text"，值是可拖动元素的 id ("dra")。
}
// ondrop 拖动完成放置在该元素中的时候除非该事件
function drop(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
function drop1(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
</script>
</html>