拖拽一共有七个监听事件
dragstart: 源对象拖拽开始；
drag: 源对象拖拽的过程中；
dragend: 源对象拖拽结束；
dragenter: 进入过程对象区域;
dragover: 在过程对象区域内移动；
dragleave: 离开过程对象区域；
drop: 源对象拖放到目标区域。
简单使用如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
.s1 {
width: 10px;
height: 10px;
background-color: red;
/*position: absolute;*/
}
.s2 {
width: 100px;
height: 100px;
background-color: yellow;
/*position: absolute;*/
}
</style>
</head>
<body>
<p class="s1" draggable="true" id='drag1'> 123 </p>
<div class="s2" id='drag2'> 3445 </div>
<script>
var s1 = document.getElementById('drag1');
var s2 = document.getElementById('drag2');
s1.ondragstart = function (event) {
// 设置被拖数据的数据类型和值
event.dataTransfer.setData("Text",event.target.id);
}
s2.ondragover = function (event) {
event.preventDefault();
}
s2.ondrop = function (event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>