在智慧型手機發展飛速的現在拖放功能已經成為一種時尚，但是在我們的瀏覽器上是不是還缺少這種方便快捷的功能?在HTML5的新標準中就有關於拖放的標準，作為Html5標準的一部分，任何元素都可以被拖放。
一、瀏覽器支援情況
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。
註：在 Safari 5.1.2 不支援拖放。
二、使用方法
首先，為了使元素可拖動，把draggable 屬性設定為true ：
<img draggable="true" />
然後，規定元素被拖曳時，會發生什麼
start
讓rag ，並給該函數傳回一個拖曳物件
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
dataTransfer.setData() 方法設定被拖曳資料的資料類型和值：(我們將被拖曳物件的id傳給dataTransfer)
function drag(ev)
{
<span style="white-space:pre"> </span>ev.dataTransfer.setData("Text",ev.target.id);
}放到何處- ondragover
ondragover 事件規定在何處放置被拖曳的資料。
默認地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
這要透過呼叫 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
當放置被拖曳資料時，會發生 drop 事件。
在上面，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
<span style="white-space:pre"> </span>ev.preventDefault();
<span style="white-space:pre"> </span>var data=ev.dataTransfer.getData("Text");
<span style="white-space:pre"> </span>ev.target.appendChild(document.getElementById(data));
}程式碼解釋：
調用preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）
透過dataTransfer.getData("Text") 方法取得被拖曳的資料。此方法將傳回在 setData() 方法中設定為相同類型的任何資料。
被拖資料是被拖元素的id ("drag1")
把被拖元素追加到放置元素（目標元素）中
二、實例說明以上就是 小強的HTML5行動開發之路（16）－神奇的拖放功能的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
