js中的拖拽drag
阿新 • • 發佈：2019-02-13
/** * 拖放事件 * (預設影象,連結,文字是可以拖動的) * (別的元素要拖動首先設定draggable="true":對於draggable的支援ie10+,ie9-只能使用預設拖動) * 1. 被拖放元素拖放事件: * a.dragstart:被拖放的元素開始拖放的時候觸發 * b.drag:在拖放過程中持續觸犯 * c.dragend:停止投放的時候觸發 * 2. 被放置元素拖放事件: * a.dragenter:有投放元素進入的時候觸發 * b.dragover:拖放元素子裡面移動的時候連續觸發 * c.dragleave:拖放元素出去的時候觸發 * d.drop:拖放元素在裡面放置的時候觸發 * * 3. 拖放中的資料傳遞 * a.在拖放資料的時候使用dataTransfer來儲存和獲取資料 * b.儲存資料:ev.dataTransfer.setData("型別","值") 型別通用有兩種:"text/plain"和"text/url-list"(ie中使用"text"和"url") * c.獲取資料:ev.dataTransfer.getData("型別")型別同上 * (獲取資料是在目標物件的drop事件上獲取在別的事件上都取不到) * (注意設定document的dragover和dragend為return false否則獲取不到資料) * (目標有幾層元素就會觸發幾次) * 4. dropEffect和effectAllowed(這是dataTransfer的兩個屬性) * 每一個屬性試過過後發現: * 對於拖動元素而言在dragstart時設定effectAllowed不為none游標顯示為指標而不是禁止標誌 * (除了游標改變我沒發現別的什麼效果) * (如有人發現不同效用不吝指教) * * 5.dataTransfer屬性: * a. clearData(format):清除特定格式的資料 * b. setDragImg(elem,x,y):設定拖動的時候游標下面顯示的影象,(x,y為游標在影象上的位置) * (這個方法還是很好用的,但是不支援ie) * */
下面是從網上拉下來的一個測試示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function init() { var source = document.getElementById("dragme"); var dest = document.getElementById("text"); var oImg=document.getElementsByTagName("img")[0]; oImg.ondragstart=function(e){ e.preventDefault(); }; source.addEventListener("dragstart", function (e) { var dt = e.dataTransfer; dt.effectAllowed = 'copy'; dt.setDragImage(oImg,25,25); dt.setData("text/plain", "你好"); }, false); dest.addEventListener("dragend", function (e) { e.preventDefault(); }, false); dest.addEventListener("drop", function (e) { var dt = e.dataTransfer; var text = dt.getData("text/plain"); dt.dropEffect = 'none'; //其實沒什麼卵用(即使設定為link,a元素拉進來也不會開啟連結) dest.textContent += text; e.preventDefault(); e.stopPropagation; }, false); } document.ondragover = function (e) { //必須的 e.preventDefault(); }; document.ondrop = function (e) { //必須的 e.preventDefault(); }; </script> </head> <body onload="init()"> <img src="../images/sky02.jpg" width="50" height="50"> <a id="dragme" href="http://www.baidu.com">請拖放</a> <div id="text" style="width:200px;height:200px;border:1px solid;border-color:gray"></div> </body> </html>