HTML5 拖放
本節我們學習html5 中的拖放，拖放是一種常見的特性，也就是抓取物件以後拖到另一個位置。在html5 中，拖放是標準的一部分，任何元素都能夠拖放。
辦公資源網址導航 https://www.wode007.com 熊貓辦公https://www.wode007.com/sites/73654.html
拖放事件
拖放是由拖動與釋放兩部分組成，拖放事件也分為被拖動元素的相關事件，和容器的相關事件。
被拖動元素的相關事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragstart | 使用者開始拖動元素時觸發 |
| ondrag | 元素正在拖動時觸發 |
| ondragend | 使用者完成元素拖動後觸發 |
容器相關事件如下所示：
| 事件 | 描述 |
|---|---|
| ondragenter | 當被滑鼠拖動的物件進入其容器範圍內時觸發此事件 |
| ondragover | 當被拖動的物件在另一物件容器範圍內拖動時觸發此事件 |
| ondragleave | 當被滑鼠拖動的物件離開其容器範圍內時觸發此事件 |
| ondrop | 在一個拖動過程中，釋放滑鼠鍵時觸發此事件 |
如何實現元素的拖放
我們通過上述的拖放事件來實現將下圖“你好，俠課島”，拖放到上面的矩形框中的演示效果：
首先建立一個HTML文字，用於測試程式碼，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(9xkd.com)</title>
<style type="text/ 然後，我們要給被拖動元素（也就是在上述的<p>標籤上），設定一個draggable屬性，此屬性用於規定元素是否可拖動，當屬性值為true時表示元素可拖動，為false表示元素不可拖動。
<p id="drag1" draggable="true">你好，俠課島！</p>
只有設定了draggable屬性值為true，指定元素才能被拖動。
然後，我們要做的是點選被拖動元素 “你好，俠課島！”，點選這個元素時需要觸發一個ondragstart事件，ondragstart事件會在使用者開始拖動元素或選擇的文字時觸發。呼叫了一個drag(event)函式，在這個函式中規定被拖動的資料，如下所示：
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
程式碼中的dataTransfer.setData()方法用於設定被拖資料的資料型別和值。引數Text表示被拖動資料的資料型別，引數e.target.id是可拖動元素的id。
接著，我們將要 “你好，俠課島！” 拖動到元素容器範圍內（矩形框中）。要實現這個步驟，需要在放置拖動元素的容器上繫結一個ondragover事件，這個事件用於規定在何處放置被拖動的資料。
預設情況下，是無法將一格元素放置到另外一個元素裡面的，所以如果需要設定允許放置，則要在ondragover事件中加上e.preventDefault()方法來阻止預設行為。
function allowDrop(e){
e.preventDefault();
}
最後，就是要放置被拖動元素，也就是要在元素容器範圍內鬆開滑鼠。需要在元素容器上繫結一個ondrop事件，如下所示，這個事件會在拖動過程中釋放滑鼠鍵時觸發。
<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)函式中儲存的資訊，也就是被拖動元素的id。接著通過target.appendChild()方法為將拖動元素作為元素容器的子元素追加到元素容器中，這樣就能成功實現拖放。
完整程式碼
完整程式碼如下所示：
<!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屬性