拖放事件
拖放是由拖動(dòng)與釋放兩部分組成，拖放事件也分為被拖動(dòng)元素的相關(guān)事件，和容器的相關(guān)事件。
被拖動(dòng)元素的相關(guān)事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragstart | 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā) |
| ondrag | 元素正在拖動(dòng)時(shí)觸發(fā) |
| ondragend | 用戶完成元素拖動(dòng)后觸發(fā) |
容器相關(guān)事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragenter | 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件 |
| ondragover | 當(dāng)被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件 |
| ondragleave | 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件 |
| ondrop | 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件 |
如何實(shí)現(xiàn)元素的拖放
首先創(chuàng)建一個(gè)HTML文本，用于測(cè)試代碼，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)</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">Hello World</p>
</div>
</body>
</html>
然后，我們要給被拖動(dòng)元素（也就是在上述的 <p> 標(biāo)簽上），設(shè)置一個(gè) draggable 屬性，此屬性用于規(guī)定元素是否可拖動(dòng)，當(dāng)屬性值為 true 時(shí)表示元素可拖動(dòng)，為 false 表示元素不可拖動(dòng)。
<p id="drag1" draggable="true">Hello World</p>
只有設(shè)置了 draggable 屬性值為 true ，指定元素才能被拖動(dòng)。
然后，我們要做的是點(diǎn)擊被拖動(dòng)元素 “你好，俠課島！”，點(diǎn)擊這個(gè)元素時(shí)需要觸發(fā)一個(gè) ondragstart 事件，ondragstart 事件會(huì)在用戶開(kāi)始拖動(dòng)元素或選擇的文本時(shí)觸發(fā)。調(diào)用了一個(gè) drag(event) 函數(shù)，在個(gè)[函數(shù)中規(guī)定被拖動(dòng)的數(shù)據(jù)，如下所示：
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
代碼中的 dataTransfer.setData() 方法用于設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值。參數(shù) Text 表示被拖動(dòng)數(shù)據(jù)的數(shù)據(jù)類型，參數(shù) e.target.id 是可拖動(dòng)元素的 id。
接著，我們將要 “Hello World” 拖動(dòng)到元素容器范圍內(nèi)（矩形框中）。要實(shí)現(xiàn)這個(gè)步驟，需要在放置拖動(dòng)元素的容器上綁定一個(gè) ondragover 事件，這個(gè)事件用于規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)情況下，是無(wú)法將一格元素放置到另外一個(gè)元素里面的，所以如果需要設(shè)置允許放置，則要在 ondragover 事件中加上 e.preventDefault() 方法來(lái)阻止默認(rèn)行為。
function allowDrop(e){
e.preventDefault();
}
最后，就是要放置被拖動(dòng)元素，也就是要在元素容器范圍內(nèi)松開(kāi)鼠標(biāo)。需要在元素容器上綁定一個(gè) ondrop 事件，如下所示，這個(gè)事件會(huì)在拖動(dòng)過(guò)程中釋放鼠標(biāo)鍵時(shí)觸發(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 事件中同樣需要調(diào)用 e.preventDefault() 方法來(lái)阻止默認(rèn)行為。然后可以通過(guò) dataTransfer.getData("Text"); 方法獲取之前的 drag(event) 函數(shù)中保存的信息，也就是被拖動(dòng)元素的 id。接著通過(guò) target.appendChild() 方法為將拖動(dòng)元素作為元素容器的子元素追加到元素容器中，這樣就能成功實(shí)現(xiàn)拖放。
完整代碼
完整代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)</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)">Hello World</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>
總結(jié)
當(dāng)我們要對(duì)某個(gè)元素實(shí)行拖放操作時(shí)，首先就需將這個(gè)元素的 draggable 屬性設(shè)置為 true，表示允許元素拖動(dòng)。其中圖片和鏈接默認(rèn)是可拖動(dòng)的，不需設(shè)置要 draggable 屬性。
