拖拽一共有七個監聽事件
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>