前段時間寫了一個簡單的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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。