js實現乙個可以相容PC端和移動端的div拖動效果

前段時間寫了乙個簡單的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 = 
varnx,ny,dx,dy,x,y ;
//滑鼠按下時的函式
function
down()
//滑鼠移動時的函式
function
move()}//
滑鼠釋放時候的函式
function
end()

然後在將事件加入到這個div中即可，下面再來看乙個在移動端需要做些什麼，首先是事件不同，只需要在新增移動端的touchatart、touchmove、touchend就可以了，還有乙個不同的時移動端獲取座標是event.touches[0].clientx和event.touches[0].clienty，這也很簡單，只要加上判斷就可以了，如果是pc端就使用event，如果是移動端就使用event.touches：

var
touch ;
if(event.touches)
else

還有一點要注意，在移動端拖動div的時候移動端的頁面會自動產生滑動效果，所以還需要在touchmove的是給頁面新增乙個阻止預設事件的函式。

下面是整個**，可以在chrome下模擬移動端測試，點選這裡檢視：

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>適配移動端的拖動效果
title
>
<
style
>
#div1
#div2
style
>
head
>
<
body
>
<
div 
id="div1"
>
<
div 
id="div2"
>
div>
div>
<
script
>
varflag 
=false
;    
varcur 
=    
varnx,ny,dx,dy,x,y ;
function
down()
else
cur.x 
=touch.clientx;
cur.y 
=touch.clienty;
dx =div2.offsetleft;
dy =div2.offsettop;
}function
move()
else
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
(),false
);        }
}//滑鼠釋放時候的函式
function
end()
vardiv2 
=document.getelementbyid(
"div2");
div2.addeventlistener(
"mousedown",
function
(),false
);    div2.addeventlistener(
"touchstart",
function
(),false
)    div2.addeventlistener(
"mousemove",
function
(),false
);    div2.addeventlistener(
"touchmove",
function
(),false
)    document.body.addeventlistener(
"mouseup",
function
(),false
);    div2.addeventlistener(
"touchend",
function
(),false
);script
>
body
>
html
>

如有問題請指正，謝謝！

js實現乙個可以相容PC端和移動端的div拖動效果

原生js實現相容常規pc 大屏移動端適配方案

使用iView cli建立乙個pc端網頁（1）

同乙個頁面同時適配手機端和PC端的方案

js實現乙個可以相容PC端和移動端的div拖動效果

原生js實現 相容常規pc 大屏 移動端 適配方案

使用iView cli建立乙個pc端網頁（1）

同乙個頁面同時適配手機端和PC端的方案

相關推薦

原生js實現相容常規pc 大屏移動端適配方案