【重點突破】——Drag&Drop拖動與釋放
阿新 • • 發佈：2017-10-04
style cti script urn 知識點 dragstart document 觸發 get
一、引言
在學習HTML5新特性的時候，學到了Drag&Drop這兩種拖放API，這裏根據拖動的是“源對象”還是“目標對象”做兩個小練習，主要是為了理解與應用HTML5為拖放行為提供的7個事件。
二、七個事件
HTML5為拖放行為提供了7個事件，分為兩組：
拖動的源對象（會動）可以觸發的事件：
- dragstart:拖動開始
- drag:拖動中
- dragend:拖動結束
整個拖動過程：dragstart*1+drag*n+dragend*1
拖動的目標對象（不會動）可以觸發的事件：
- dragenter：拖動著進入
- dragover：拖動著懸停在上方
- dragleave：拖動著離開
- drop: 在目標上方釋放
整個拖動過程1：dragenter*1+dragover*n+dragleave*1
整個拖動過程2：dragenter*1+dragover*n+drop*1
三、可以隨鼠標拖動而移動的小飛機
要求：使用拖動源對象提供的事件句柄。
小知識點：拖動事件是要求獲得相對於整個頁面的左上角的偏移量，使用e.pageX/pageY。（e.pageX與e.offsetX的區別：e.offsetX是相對於事件源左上角的偏移量）
問題1：h1有margin-top，會把body擠下來
解決方法：給body設置前置內容給元素，空格元素設為body的第一個子元素。這樣即使h1有margin-top，也不會把body擠下來
body:before{
content:‘ ‘;
display:table;
}
問題2：瀏覽器默認拖動的源對象觸發結束，自動定位位置到(0,0)點處
解決方法：當ex，ey都等於0的時候，跳出函數，不執行
if(ex===0 && ey===0){
return;//跳出函數，不執行
}
實現：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
效果：
四、模擬垃圾箱拖動刪除效果
要求：使用拖動事件的源對象和目標對象可能觸發的7個事件。
思路：在剛開始拖動時（src.ondragstart）記錄被拖動的源對象的ID，釋放時（target.ondrop）根據此ID找到源對象，執行刪除：div.removeChild(c)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
#box{
border-top:1px solid #aaa;
padding:1em;
}
</style>
</head>
<body>
<h1>拖動的目標對象可能觸發的事件</h1>
<img id="trash" src="image/trash.png">
<div id="box">
<img id="p1" src="image/p1.png">
<img id="p2" src="image/p4.png">
<img id="p3" src="image/p3.png">
</div>
<script>
var planeId = null;//當前被拖動的飛機的id
//拖動事件的源對象可能觸發的事件
var list = document.querySelectorAll(‘#box img‘);
for(var i= 0;i<list.length;i++){
var plane = list[i];
plane.ondragstart = function(e){
planeId = this.id;//記錄被拖放的飛機的id
};
plane.ondrag = function(e){};
plane.ondragend = function(e){}
}
//拖動事件的目標對象可能觸發的事件
trash.ondragenter = function(e){};
trash.ondragover = function(e){
e.preventDefault();
};
trash.ondragleave = function(e){};
trash.ondrop = function(e){
//根據元素的ID查找IMG元素，在#box進行刪除
var img = document.getElementById(planeId);
box.removeChild(img);
}
</script>
</body>
</html>
效果：
【重點突破】——Drag&Drop拖動與釋放