本節我們學習 HTML5 中的拖放，拖放是一種常見的特性，也就是抓取對象以後拖到另一個位置。在 HTML5 中，拖放是标準的一部分，任何元素都能夠拖放。
拖放事件
拖放是由拖動與釋放兩部分組成，拖放事件也分為被拖動元素的相關事件，和容器的相關事件。
被拖動元素的相關事件如下所示：
事件
描述
ondragstart
使用者開始拖動元素時觸發
ondrag
元素正在拖動時觸發
ondragend
使用者完成元素拖動後觸發
容器相關事件如下所示：
事件
描述
ondragenter
當被滑鼠拖動的對象進入其容器範圍内時觸發此事件
ondragover
當被拖動的對象在另一對象容器範圍内拖動時觸發此事件
ondragleave
當被滑鼠拖動的對象離開其容器範圍内時觸發此事件
ondrop
在一個拖動過程中，釋放滑鼠鍵時觸發此事件
如何實作元素的拖放
我們通過上述的拖放事件來實作将下圖“你好，俠課島”，拖放到上面的矩形框中的示範效果：
首先建立一個HTML文本，用于測試代碼，如下所示：
HTML5學習(9xkd.com)
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
你好，俠課島！
然後，我們要給被拖動元素(也就是在上述的
标簽上)，設定一個 draggable 屬性，此屬性用于規定元素是否可拖動，當屬性值為 true 時表示元素可拖動，為 false 表示元素不可拖動。
你好，俠課島！
隻有設定了 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 事件，如下所示，這個事件會在拖動過程中釋放滑鼠鍵時觸發。
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
在 ondrop 事件中同樣需要調用 e.preventDefault() 方法來阻止預設行為。然後可以通過 dataTransfer.getData("Text"); 方法擷取之前的 drag(event) 函數中儲存的資訊，也就是被拖動元素的 id。接着通過 target.appendChild() 方法為将拖動元素作為元素容器的子元素追加到元素容器中，這樣就能成功實作拖放。
完整代碼
完整代碼如下所示：
HTML5學習(9xkd.com)
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
你好，俠課島！
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));
}
總結
當我們要對某個元素實行拖放操作時，首先就需将這個元素的 draggable 屬性設定為 true，表示允許元素拖動。其中圖檔和連結預設是可拖動的，不需設定要 draggable 屬性。