HTML5拖拽API的使用實例
阿新 • • 發佈：2018-03-31
設置 round 通過 prop elements charset 使用實例 color ppr
首先介紹一下HTML5拖拽過程中產生的事件：
如果A被拖動到B內部，則
1. A會觸發ondragstart, ondrag, ondragend，分別代表拖拽開始，拖拽進行中和拖拽結束；
2. B會觸發ondragenter, ondragover, ondragleave, ondrop，分別代表A物體進入B，在B上面，從B上方離開，在B上方松手停止拖拽；
3. 如果拖動本地文件，則不會觸發ondragstart事件；
4. 事件間的數據傳遞使用e.dataTransfer.setDate(k, v)和e.dataTransfer.getData(k)。
需要註意的幾點：
0. 將A的draggable
1. dom默認拒絕對象在其內部放置，所以往往要用
B.ondragover = function(e){ e.preventDefault(); };
來取消掉默認事件；
2. 某些瀏覽器默認在拖放後以鏈接形式打開A，故需要使用
B.ondrop= function(e){ e.preventDefault(); };
3. firefox中拖放圖片會打開新頁面，這個還是比較煩的，解決方法是先獲取body元素，然後
body.ondrop = function(e){ e.stopPropagation(); e.preventDefault(); //註意這倆位置不能反了 };
4. firefox中，無法通過ondrag等事件實時獲取鼠標位置，如
A.ondrag = function(e){ console.log(e.offsetX, e.offsetY); };
這一般會輸出兩個0
解決方法是在document中設置事件監聽
document.ondragover = function(e){ e = e.originalEvent || e; x = e.clientX || e.pageX; y = e.clientY || e.pageY; }
以下是一個實例，可在HTML頁面中拖動圖片：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; min-height: 700px; position: relative; } img{ position:absolute; left: 0; top: 0; } </style> </head> <body> <h3>可拖動赤醬</h3> <img id="chi" src="nyachichi.png" alt="chichiyan" draggable="true" /> <script> var chi = document.getElementById("chi"); var body = document.getElementsByTagName("body")[0]; var offsetX, offsetY, x, y; document.ondragover = function(e){ e = e.originalEvent || e; x = e.clientX || e.pageX; y = e.clientY || e.pageY; } body.ondragover = function(e){ e.preventDefault(); } body.ondrop = function(e){ e.stopPropagation(); e.preventDefault(); console.log("事件源chi拖動結束"); } chi.ondragstart=function(e){ console.log(‘事件源chi開始拖動‘); offsetX = e.offsetX; offsetY = e.offsetY; }
chi.ondrag=function(e){ <!-- console.log(‘事件源chi拖動中‘); --> } chi.ondragend=function(e){ e.preventDefault(); chi.style.left = x-offsetX + "px"; chi.style.top = y-offsetY + "px"; } </script> </body> </html>
HTML5拖拽API的使用實例