本節(jié)我們學習 HTML5 中的拖放，拖放是一種常見的特性，也就是抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
拖放事件
拖放是由拖動與釋放兩部分組成，拖放事件也分為被拖動元素的相關事件，和容器的相關事件。
被拖動元素的相關事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragstart | 用戶開始拖動元素時觸發(fā) |
| ondrag | 元素正在拖動時觸發(fā) |
| ondragend | 用戶完成元素拖動后觸發(fā) |
容器相關事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragenter | 當被鼠標拖動的對象進入其容器范圍內時觸發(fā)此事件 |
| ondragover | 當被拖動的對象在另一對象容器范圍內拖動時觸發(fā)此事件 |
| ondragleave | 當被鼠標拖動的對象離開其容器范圍內時觸發(fā)此事件 |
| ondrop | 在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件 |
如何實現(xiàn)元素的拖放
我們通過上述的拖放事件來實現(xiàn)將下圖“你好，俠課島”，拖放到上面的矩形框中的演示效果：
- 首先創(chuàng)建一個HTML文本，用于測試代碼，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div class="div1" id="div1" ></div>
<p id="drag1">你好，俠課島！</p>
</div>
</body>
</html>
- 然后，我們要給被拖動元素（也就是在上述的
<p>標簽上），設置一個draggable屬性，此屬性用于規(guī)定元素是否可拖動，當屬性值為true時表示元素可拖動，為false表示元素不可拖動。
<p id="drag1" draggable="true">你好，俠課島！</p>
只有設置了 draggable 屬性值為 true ，指定元素才能被拖動。
- 然后，我們要做的是點擊被拖動元素 “你好，俠課島！”，點擊這個元素時需要觸發(fā)一個
ondragstart事件，ondragstart事件會在用戶開始拖動元素或選擇的文本時觸發(fā)。調用了一個drag(event)函數(shù)，在這個函數(shù)中規(guī)定被拖動的數(shù)據(jù)，如下所示：
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
代碼中的 dataTransfer.setData() 方法用于設置被拖數(shù)據(jù)的數(shù)據(jù)類型和值。參數(shù) Text 表示被拖動數(shù)據(jù)的數(shù)據(jù)類型，參數(shù) e.target.id 是可拖動元素的 id。
-
接著，我們將要 “你好，俠課島！” 拖動到元素容器范圍內（矩形框中）。要實現(xiàn)這個步驟，需要在放置拖動元素的容器上綁定一個
ondragover事件，這個事件用于規(guī)定在何處放置被拖動的數(shù)據(jù)。默認情況下，是無法將一格元素放置到另外一個元素里面的，所以如果需要設置允許放置，則要在
ondragover事件中加上e.preventDefault()方法來阻止默認行為。
function allowDrop(e){
e.preventDefault();
}
- 最后，就是要放置被拖動元素，也就是要在元素容器范圍內松開鼠標。需要在元素容器上綁定一個
ondrop事件，如下所示，這個事件會在拖動過程中釋放鼠標鍵時觸發(fā)。
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<script>
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
在 ondrop 事件中同樣需要調用 e.preventDefault() 方法來阻止默認行為。然后可以通過 dataTransfer.getData("Text"); 方法獲取之前的 drag(event) 函數(shù)中保存的信息，也就是被拖動元素的 id。接著通過 target.appendChild() 方法為將拖動元素作為元素容器的子元素追加到元素容器中，這樣就能成功實現(xiàn)拖放。
完整代碼
完整代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<p id="drag1" draggable="true" ondragstart="drag(event)">你好，俠課島！</p>
</div>
<script>
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e){
e.preventDefault();
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
總結
當我們要對某個元素實行拖放操作時，首先就需將這個元素的 draggable 屬性設置為 true，表示允許元素拖動。其中圖片和鏈接默認是可拖動的，不需設置要 draggable 屬性。
