如图片：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>可拖拽的元素组件</title>
<style>
#d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
#d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
</style>
</head>
<body>
<div id="d1">
<img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
<div id="d2"></div>
<script>
//获取图片及两个div元素
var d1 = document.getElementById("d1"),
myimg = document.getElementById("myimg"),
d2 = document.getElementById("d2");
//给图片绑定dragstart事件
myimg.addEventListener("dragstart",MyDragStart);
//给第二个div绑定dragover,drop两个事件
d2.addEventListener("dragover",MyDragover);
d2.addEventListener("drop",MyDrop);
//给第一个div绑定dragover,drop两个事件
d1.addEventListener("dragover",MyDragover);
d1.addEventListener("drop",MyDrop);
//图片开始拖拽事件的处理函数
function MyDragStart(event){
var mydata = myimg.id;//保存ID值
var trans = event.dataTransfer;
trans.setData("text",mydata);
}
//该处理函数是为阻止页面的默认行为
function MyDragover(){
event.preventDefault();
}
//drop处理函数
function MyDrop(event){
//
var trans = event.dataTransfer;//获取数据保存对象
var mysrc = trans.getData("text");//图片id
var ele = document.getElementById(mysrc);//获取到图片对象
if (ele != event.srcElement)//判断图片是否移动
{
event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中
}
trans.clearData("text");//清除数据
}
</script>
</body>
</html>
http://www.cnblogs.com/Medeor/p/4963321.html
原文：http://www.cnblogs.com/xiangsj/p/6346574.html