源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5拖拽效果</title>
<style>
#d1 {
width: 400px;
height: 400px;
border: solid black 1px;
float: left;;
} #d2 {
width: 400px;
height: 400px;
border: solid black 1px;
float: right;;
}
</style>
</head> <body>
<div id="d1">
<img src="smallPicture.png" id="myImage">
</div>
<div id="d2"></div>
</body>
</html>
<script type="text/javascript">
var myImage = document.getElementById("myImage");//获取源元素（图片）对象 myImage.addEventListener("dragstart", MyDrageStart);//对源元素添加开始拖拽监听事件 function MyDrageStart(event) {
var imgData = myImage.src;
var trans = event.dataTransfer;//获得dataTransfer对象
trans.setData('text', imgData);
//设置源数据（即将源数据放置到dataTransfer中，个人理解即将myImage的是src赋给dataTransfer，相当于一个中间存储的介质）
} var div2 = document.getElementById("d2");
div2.addEventListener("dragover", MyDragOver);//鼠标每次进入目标元素时触发
div2.addEventListener("drop", MyDrop);//实现拖放效果时触发，即放下的时候触发 function MyDragOver(event) {
event.preventDefault();//去除默认的拖放效果，即html5默认是不允许进行拖放的
} function MyDrop(event) {
var trans = event.dataTransfer;
var mysrc = trans.getData("text");//设置目标元素数据
div2.innerHTML = "<img src=" + mysrc + ">";
trans.clearData("text");//尽量还是要加上这个，因为dataTransfer是会占用内存的，若是一直不清空会影响浏览器的执行效率
var div1=document.getElementById("d1");
div1.removeChild(myImage);//实现将源元素（图片）移到目标元素，而原来的源元素（图片）消失的效果
} </script>
效果图：
移动前：
移动后：