Internet Explorer 9、Firefox、Opera 12、Chrome 以及Safari 5 支持拖放。
註釋：在Safari 5.1.2 中不支持拖放。 HTML5 拖放實例<!DOCTYPE html><html> <head> <style type=text/css> #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type= text/javascript> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData(Text,ev.target.id); } function drop(ev) { ev.preventDefault() ; var data=ev.dataTransfer.getData(Text); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>請把Aseoe logo的圖片拖放到矩形中：p> <div id=div1 ondrop=drop(event) ondragover=allowDrop(event)>div> <br /> <img id=drag1 src=http://www.aseoe.com/statics/images /eoe/logo.png draggable=true ondragstart=drag(event) /> </body> </html>設置元素為可拖放首先，為了使元素可拖動，把draggable 屬性設置為true ：
拖動什麼- ondragstart 和setData()然後，規定當元素被拖動時，會發生什麼。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev){ev.dataTransfer.setData(Text,ev.target.id);}在這個例子中，數據類型是Text，值是可拖動元素的id (drag1)。
放到何處- ondragoverondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用ondragover 事件的event.preventDefault() 方法：
event.preventDefault()進行放置- ondrop
當放置被拖數據時，會發生drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));}代碼解釋：調用preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過dataTransfer.getData(Text) 方法獲得被拖的數據。該方法將返回在setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的id (drag1)
把被拖元素追加到放置元素（目標元素）中
總結以上就是這篇文章的全部內容了，希望本文的內容對各位學習或者使用HTML5能有所幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。