簡介
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 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")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 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對象來傳輸數據，以便在拖曳操作結束的時候對數據進行其他的操作。
對象屬性：
對象方法：
Identify what is draggable
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武林網。
新聞熱點
疑難解答
