可拖動
網頁中的圖像、鏈接和文本是瀏覽器默認可以被拖動的，HTML5 為所有的HTML元素都提供了一個draggable屬性，當這個屬性的值為true的時候，元素被視為可以拖動。
拖動圖像或者鏈接時，將鼠標放在圖像或者鏈接上，按住鼠標不放就可以拖動它。拖動文本時，要先選中文本，然后可以像拖動圖像一樣拖動選中的文本。
被拖動的元素事件
拖動圖片時依次觸發：drapstart,drag,dragend事件。這三個事件的目標都是被拖動的元素。
按下鼠標鍵并開始移動鼠標時，會在被拖放元素上觸發dragstart事件。觸發dragstart事件后，隨即會觸發drag事件，而且在元素被拖動期間會持續觸發drag事件；當拖動停止后，無論把元素放到了有效的放置目標還是無效的放置目標上都會觸發dragend事件。
放置目標元素事件
當某個元素被拖動到一個有效的放置目標上時，會一次觸發：dragenter,dragover,dragleave或drop事件
只要有元素被拖動到放置目標上就會觸發dragenter事件，緊隨其后的是dragover事件，而且在被拖動的元素還在放置目標的范圍內移動時，就會持續觸發dragover事件；如果元素被拖出了放置目標就不在觸發dragover事件，就會觸發dragleave事件。如果元素被放到了放置目標中，就會觸發drop事件而不是dragleave事件。這幾個事件的目標都是作為放置目標的元素。
谷歌瀏覽器中支持效果好，火狐效果不好
自定義放置目標
我們可以把任何元素變成有效的放置目標，方法是重寫dragenter和dragover事件的默認行為
在FF中，放置事件的默認行為是打開被放到放置目標上的URL。換句話說，如果是把圖像拖放
到放置目標上，頁面就會轉向圖像文件；如果是把文本拖放到放置目標上，則會導致無效的URL錯誤。
因此，為了讓FF支持正常的拖放，還要取消drop事件的默認行為，阻止它打開URL。
dataTransfer對象
原生拖放當中最大的特性就是可以利用拖放事件傳遞數據，這樣使瀏覽器原生就可以支持類似于桌面應用的拖放交互功能。要使用數據傳輸功能就需要一個名為 dataTransfer 的接口。
dataTransfer對象是事件對象的一個屬性，它有兩個主要方法：getData()和setData()。setData() 用于保存值，getData() 用于獲得 setData() 保存的值。
在拖動文本框中的文本時，瀏覽器會調用setData()方法，將拖動的文本以"text"格式保存在dataTransfer對象中。類似的，在拖放鏈接或者圖像時，會調用setData()方法并保存URL。然后，在這些元素被拖放到放置目標時，就可以通過getData()方法讀到這些數據了。
保存的數據類型為"text"或"url"，在HTML5中這兩種數據類型被映射為"text/plain"和"text/uri-list"
將數據保存為文本和URL是有區別的。如果將數據保存為文本格式，那么數據不會得到任何特殊處理。而如果將數據保存為URL，瀏覽器會將其當成網頁中的鏈接。換句話說，如果你把它放置到另一個瀏覽器窗口中，瀏覽器就會打開該URL。
Demo:
文本拖放：
<!DOCTYPE HTML><html><meta charset="utf-8"><title>HTML5文本拖放</title><head><style type="text/css">#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><p id="p1">拖動文本到矩形框中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ //dataTransfer.setData() 方法設置被拖數據的數據類型和值 //這里數據類型是 "Text"，值是p標簽中的文本ev.dataTransfer.setData("Text",document.getElementById("p1").innerHTML);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.innerHTML=data;}</script></body></html>鏈接拖放：
<!DOCTYPE HTML><html><meta charset="utf-8"><title>HTML5鏈接拖放</title><head><style type="text/css">#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><a id="aa">鏈接到百度</a><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><script type="text/javascript">/*ondragover 事件規定在何處放置被拖動的數據。默認地，無法將數據元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 */function allowDrop(ev){ev.preventDefault();}function drag(ev){ //dataTransfer.setData() 方法設置被拖數據的數據類型和值 //這里數據類型是 "Text"，值是p標簽中的文本ev.dataTransfer.setData("URL",document.getElementById(data).href);}function drop(ev){ //調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）ev.preventDefault();//通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。var data=ev.dataTransfer.getData("URL");ev.target.innerHTML=data;}</script></body></html>圖片拖放：
<!DOCTYPE HTML><html><meta charset="utf-8"><title>HTML5圖片拖放</title><head><style type="text/css">#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><p id="p1">拖動圖片到矩形框中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="abao.png" draggable="true" ondragstart="drag(event)" width="220" height="181"><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ //dataTransfer.setData() 方法設置被拖數據的數據類型和值 //這里數據類型是 "Text"，值是可拖動元素的 id ("drag1")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>圖片來回拖放：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>圖片來回拖放</title> <style type="text/css"> div{width: 230px;height: 185px;padding: 10px;float: left;margin-right: 10px;border: 1px solid#ccc;} </style> </head> <body> <div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img src="abao.png" id="drag1" draggable="true" ondragstart="drag(event)"> <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> </body></html>dropEffect和effectAllowed屬性
利用dataTransfer對象，不光是能夠傳輸數據，還能夠通過它來確定被拖動的元素以及作為放置目標的元素能夠接收什么操作。這需要訪問其兩個屬性：dropEffect屬性和effectAllowed屬性。
dropEffect 瀏覽器會根據不同的值顯示不同類型的光標，提升用戶放置后的行為。 dropEffect 包括以下幾個值:
•"none": 不能把拖動的元素放在這里
•"move": 應該把拖動的元素移動到放置目標
•"copy": 應該把拖動的元素復制到放置目標
•"link":表示放置目標會打開拖動的元素 (但拖動的元素必須是一個鏈接，有URL)
瀏覽器僅僅會幫你改變光標的類型，但是要實現怎樣的效果都是要開發者自己去實現。
dropEffect屬性只有搭配effectAllowed屬性才有用，effectAllowed屬性表示允許拖動元素的哪種dropEffect行為，它的值有以下幾種：
•"uninitialized":沒有給被拖動的元素設置任何放置行為。
•"none": 被拖動的元素不能有任何行為
•"copy“：只允許值為 “copy” 的放置行為
•"link":只允許值為 “link” 的放置行為
•"move"：只允許值為 “move” 的放置行為
•"copyLink"： 允許值為 “copy” 和 “link” 的放置行為
•"copyMove"： 允許值為 “copy” 和 “move” 的放置行為
•"linkMove"： 允許值為 “link” 和 “move” 的放置行為
•"all"： 允許所有放置行為
必須在ondragstart事件處理程序中設置effectAllowed屬性
Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>My-dropEffect and effectAllowed</title></head><body> <a >鏈接到百度</a> <div style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></div> <div id="output"></div> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> var droptarget = document.getElementById("droptarget");//獲取放置目標 var link = document.links[0]; //console.log(document.links);//HTMLCollection[a] //console.log(document.links[0]);// <a > function handleEvent(event){ document.getElementById("output").innerHTML += event.type + "<br>"; switch(event.type){ case "dragstart": case "dragend": event.dataTransfer.dropEffect = "link";//表示放置目標會打開拖動的元素。要想使用dropEffect，必須進行相應的設置，這里將其設置為link break; case "dragenter": case "dragover": EventUtil.preventDefault(event); event.dataTransfer.effectAllowed = "link";//表示值允許"link"的dropEffect break; case "drop": case "dragleave": droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list"); //event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");是讀取URL } } EventUtil.addHandler(droptarget, "dragenter", handleEvent); EventUtil.addHandler(droptarget, "dragover", handleEvent); EventUtil.addHandler(droptarget, "dragleave", handleEvent); EventUtil.addHandler(droptarget, "drop", handleEvent); EventUtil.addHandler(link, "dragstart", handleEvent); EventUtil.addHandler(link, "dragend", handleEvent); </script></body></html>Demo2:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>My-dropEffect and effectAllowed</title></head><body><a >鏈接到百度</a> <p>哈哈哈哈</p> <div style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></div> <div id="output"></div> <script type="text/javascript" src="../EventUtil.js"></script> <script type="text/javascript"> var droptarget = document.getElementById("droptarget");//獲取放置目標 var link = document.links[0]; //console.log(document.links);//HTMLCollection[a] //console.log(document.links[0]);// <a > function handleEvent(event){ document.getElementById("output").innerHTML += event.type + "<br>"; switch(event.type){ case "dragstart": case "dragend": event.dataTransfer.dropEffect = "move";//表示應該把拖動的元素移動到放置目標 case "dragenter": case "dragover": EventUtil.preventDefault(event); event.dataTransfer.effectAllowed = "move";//表示值允許"move"的dropEffect break; case "drop": case "dragleave": EventUtil.preventDefault(event); //這里是為了阻止放置事件的默認行為：打開被放到放置目標上的URL droptarget.innerHTML = event.dataTransfer.getData("Text"); } } EventUtil.addHandler(droptarget, "dragenter", handleEvent); EventUtil.addHandler(droptarget, "dragover", handleEvent); EventUtil.addHandler(droptarget, "dragleave", handleEvent); EventUtil.addHandler(droptarget, "drop", handleEvent); EventUtil.addHandler(link, "dragstart", handleEvent); EventUtil.addHandler(link, "dragend", handleEvent); </script></body></html>以上這篇淺談js原生拖放就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
