前段時間寫了一個簡單的div拖動效果,不料昨天項目上正好需要一個相差不多的需求,就正好用上了,但是在移動端的時候卻碰到了問題,拖動時候用到的三個事件:mousedown、mousemove、mouseup在移動端都不起任何作用。畢竟移動端是沒有鼠標的,查資料後發現,在移動端與之相對應的分別是:touchstart、touchmove、touchend事件。還有一點要注意的是在PC端獲取當前鼠標的坐標是:event.clientX和event.clientY,在移動端獲取坐標位置則是:event.touches[0].clientX和event.touches[0].clientY。
下面就來說說怎麼實現這個效果吧,先看一下效果:
PC端
移動端
先來分析一個拖動的流程,以PC端為例,首先是鼠標按下(mousedown事件),然後移動(mousemove事件),最後釋放鼠標(mouseup事件),首先要設置一個變量記錄鼠標是否按下,在鼠標按下的時候,我們做一個標記,然後需要記錄一下鼠標當前的坐標,還有這個div當前的偏移量,當鼠標開始移動的時候,記錄下鼠標當前的坐標,用鼠標當前的坐標減去鼠標按下時的坐標再加上鼠標按下時div的偏移量就是現在div距離父輩元素的距離,當鼠標釋放的時候將標記改為鼠標已經釋放。
下面來看一下代碼:
var flag = false; //是否按下鼠標的標記 var cur = { //記錄鼠標按下時的坐標 x:0, y:0 } var nx,ny,dx,dy,x,y ; //鼠標按下時的函數 function down(){ flag = true; //確認鼠標按下 cur.x = event.clientX; //記錄當前鼠標的x坐標 cur.y = event.clientY; //記錄當前鼠標的y坐標 dx = div2.offsetLeft; //記錄div當時的左偏移量 dy = div2.offsetTop; //記錄div的上偏移量 } //鼠標移動時的函數 function move(){ if(flag){ //如果是鼠標按下則繼續執行 nx = event.clientX - cur.x; //記錄鼠標在x軸移動的數據 ny = event.clientY - cur.y; //記錄鼠標在y軸移動的數據 x = dx+nx; //div在x軸的偏移量加上鼠標在x軸移動的距離 y = dy+ny; //div在y軸的偏移量加上鼠標在y軸移動的距離 div2.style.left = x+"px"; div2.style.top = y +"px"; } } //鼠標釋放時候的函數 function end(){ flag = false; //鼠標釋放 }
然後在將事件加入到這個div中即可,下面再來看一個在移動端需要做些什麼,首先是事件不同,只需要在添加移動端的touchatart、touchmove、touchend就可以了,還有一個不同的時移動端獲取坐標是event.touches[0].clientX和event.touches[0].clientY,這也很簡單,只要加上判斷就可以了,如果是PC端就使用event,如果是移動端就使用event.touches:
var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; }
還有一點要注意,在移動端拖動div的時候移動端的頁面會自動產生滑動效果,所以還需要在touchmove的是給頁面添加一個阻止默認事件的函數。
下面是整個代碼,可以在Chrome下模擬移動端測試,點擊這裡查看:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>適配移動端的拖動效果</title> <style> #div1{ height: 1000px; } #div2{ position: absolute; top:0; left:0; width: 100px; height: 100px; background: #bbbbbb; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> <script> var flag = false; var cur = { x:0, y:0 } var nx,ny,dx,dy,x,y ; function down(){ flag = true; var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } cur.x = touch.clientX; cur.y = touch.clientY; dx = div2.offsetLeft; dy = div2.offsetTop; } function move(){ if(flag){ var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } nx = touch.clientX - cur.x; ny = touch.clientY - cur.y; x = dx+nx; y = dy+ny; div2.style.left = x+"px"; div2.style.top = y +"px"; //阻止頁面的滑動默認事件 document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } } //鼠標釋放時候的函數 function end(){ flag = false; } var div2 = document.getElementById("div2"); div2.addEventListener("mousedown",function(){ down(); },false); div2.addEventListener("touchstart",function(){ down(); },false) div2.addEventListener("mousemove",function(){ move(); },false); div2.addEventListener("touchmove",function(){ move(); },false) document.body.addEventListener("mouseup",function(){ end(); },false); div2.addEventListener("touchend",function(){ end(); },false); </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。