拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何的元素都可以拖放。
要想实现拖放，首先必须为元素设置 draggable属性，使其为true，即draggable="true"。
关于拖放有若干个事件，其中对于被拖放元素的事件有：
ondrag
ondragstart
ondragleave
ondragendondragstart事件会在开始拖放元素时触发，ondrag会在拖放的过程中持续触发，ondragleave会在鼠标离开被拖放元素区域时触发，ondragend会在结束拖放时触发。
对于被拖放元素要进入的目标元素也有一些事件：
ondragenter
ondragover
ondrop
ondragleave其中，ondragenter在拖放元素进入目标元素时触发，ondragover在被拖放元素在目标元素区域内持续触发，ondrop会在被拖放元素在目标区域内松开鼠标时触发，ondragleave会在被拖放元素离开目标元素区域时触发。
关于ondragover事件,默认的，无法将元素放置到其他元素中。如果需要设置，则必须阻止对元素的默认处理方式，即：
obj.ondragover = function(e){ e.preventDefault(); }
下面根据这些api实现在两个div中拖放图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 270px;
height: 300px;
border: 1px solid #333;
float: left;
margin-right: 100px;
}
</style>
</head>
<body>
<div id="dv1">
<img src="images/a.jpg" alt="" draggable="true" id="panda"> <!-- 只需修改这部分内容 -->
</div>
<div id="dv2"></div>
<script>
document.ondragstart = function (e) { // e.target ==> img
var id = e.target.id;
e.dataTransfer.setData("text/html", id);
};
document.ondragover = function (e) {
e.preventDefault();
};
document.ondrop = function (e) { // e.target ==> dv2
var id = e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));
};
</script>
</body>
</html>