自己应该用mousedown mouseup的方式写一遍比较一下代码量
研究的原始代码
<!DOCTYPE HTML>
<html>
<meta charset="utf8">
<head>
<script>
// dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
// darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
// dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
// dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
// dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
// drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
// dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<style>
div{
background:aqua;
width:600px;
height:400px;
}
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://www.gbtags.com/gb/networks/themes/img/geekcamp/fir.im.png"
ondragstart="drag(event)">
</body>
</html>
