拖放是一種常見的特性，即抓取對像以後拖到另一個位置。
在HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
先點擊一個小例子：在用戶開始拖動<p> 元素時執行JavaScript
<p draggable=true ondragstart=myFunction(event)>拖動我!</p>
提示： 鏈接和圖片默認是可拖動的，不需要draggable 屬性。
定義和用法在拖放的過程中會觸發以下事件：
Internet Explorer 9+, Firefox, Opera, Chrome, 和Safari 支持拖動。
注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔350 毫秒會觸發ondragover 事件。
實例先貼代碼，再逐一解釋：
<!DOCTYPE html><html><head><title>HTML5拖拽</title><meta charset=utf-8><style>#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><p>拖動img_w3slogo.gif圖片到矩形框中:</p><div id=div1 ondrop=drop(event) ondragover=allowDrop(event )></div><br><img id=drag1 src=images/img_w3slogo.gif draggable=true ondragstart=drag(event) width=300 height=56><script>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></body></html>拖拽前的頁面效果為：
下面分別來解析下上面代碼的意思。
設置元素可拖放首先，為了使元素可拖動，把draggable 屬性設置為true ：
<img 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));}代碼解釋：
實現的結果如圖：
dataTransfer對象在拖曳操作的過程中，我們可以用過dataTransfer對象來傳輸數據，以便在拖曳操作結束的時候對數據進行其他的操作。
對象屬性： function dragstart_handler(ev) { console.log(dragStart); // Add the target element's id to the data transfer object ev.dataTransfer.setData(text/plain, ev.target.id);}<body> <p id= p1 draggable=true ondragstart=dragstart_handler(event);>This element is draggable.</p></body> Define the drag's data function dragstart_handler(ev) { // Add the drag data ev.dataTransfer.setData(text/plain, ev.target.id); ev.dataTransfer.setData(text/html, <p>Example paragraph</p>); ev.dataTransfer.setData(text/uri-list, http://developer.mozilla.org);} Define the drag image function dragstart_handler(ev) { // Create an image and then use it for the drag image. // NOTE: change example.gif to an existing image or the image // will not be created and the default drag image will be used. var img = new Image(); img.src = 'example.gif'; ev.dataTransfer.setDragImage(img, 10, 10);} Define the drag effect function dragstart_handler(ev) { // Set the drag effect to copy ev.dataTransfer.dropEffect = copy;} Define a drop zone function dragover_handler(ev) { ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = move}function drop_handler(ev) { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM var data = ev.dataTransfer.getData(text); ev.target.appendChild(document.getElementById(data));}<body> <div id=target ondrop=drop_handler(event); ondragover= dragover_handler(event);>Drop Zone</div></body>火狐瀏覽器拖拽問題但是進行到這兒在火狐瀏覽器中發現一個問題：
html5的拖拽，用了preventDefault防止彈出新頁面，但在火狐下不管用？
解決辦法：
document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation();}或者對於上面的實例中，添加到ondrop方法裡面也是可以的：
function drop(ev){ ev.preventDefault(); ev.stopPropagation(); var data=ev.dataTransfer.getData(Text); ev.target.appendChild(document.getElementById(data));}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。