前段時間寫了一個簡單的div拖動效果，不料昨天項(xiàng)目上正好需要一個相差不多的需求，就正好用上了，但是在移動端的時候卻碰到了問題，拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。畢竟移動端是沒有鼠標(biāo)的，查資料后發(fā)現(xiàn)，在移動端與之相對應(yīng)的分別是：touchstart、touchmove、touchend事件。還有一點(diǎn)要注意的是在PC端獲取當(dāng)前鼠標(biāo)的坐標(biāo)是：event.clientX和event.clientY，在移動端獲取坐標(biāo)位置則是：event.touches[0].clientX和event.touches[0].clientY。
下面就來說說怎么實(shí)現(xiàn)這個效果吧，先看一下效果：
PC端
移動端
先來分析一個拖動的流程，以PC端為例，首先是鼠標(biāo)按下（mousedown事件），然后移動（mousemove事件），最后釋放鼠標(biāo)（mouseup事件），首先要設(shè)置一個變量記錄鼠標(biāo)是否按下，在鼠標(biāo)按下的時候，我們做一個標(biāo)記，然后需要記錄一下鼠標(biāo)當(dāng)前的坐標(biāo)，還有這個div當(dāng)前的偏移量，當(dāng)鼠標(biāo)開始移動的時候，記錄下鼠標(biāo)當(dāng)前的坐標(biāo)，用鼠標(biāo)當(dāng)前的坐標(biāo)減去鼠標(biāo)按下時的坐標(biāo)再加上鼠標(biāo)按下時div的偏移量就是現(xiàn)在div距離父輩元素的距離，當(dāng)鼠標(biāo)釋放的時候?qū)?biāo)記改為鼠標(biāo)已經(jīng)釋放。
下面來看一下代碼：
var flag = false; //是否按下鼠標(biāo)的標(biāo)記var cur = { //記錄鼠標(biāo)按下時的坐標(biāo) x:0, y:0}var nx,ny,dx,dy,x,y ;//鼠標(biāo)按下時的函數(shù)function down(){ flag = true; //確認(rèn)鼠標(biāo)按下 cur.x = event.clientX; //記錄當(dāng)前鼠標(biāo)的x坐標(biāo) cur.y = event.clientY; //記錄當(dāng)前鼠標(biāo)的y坐標(biāo) dx = div2.offsetLeft; //記錄div當(dāng)時的左偏移量 dy = div2.offsetTop; //記錄div的上偏移量}//鼠標(biāo)移動時的函數(shù)function move(){ if(flag){ //如果是鼠標(biāo)按下則繼續(xù)執(zhí)行 nx = event.clientX - cur.x; //記錄鼠標(biāo)在x軸移動的數(shù)據(jù) ny = event.clientY - cur.y; //記錄鼠標(biāo)在y軸移動的數(shù)據(jù) x = dx+nx; //div在x軸的偏移量加上鼠標(biāo)在x軸移動的距離 y = dy+ny; //div在y軸的偏移量加上鼠標(biāo)在y軸移動的距離 div2.style.left = x+"px"; div2.style.top = y +"px"; }}//鼠標(biāo)釋放時候的函數(shù)function end(){ flag = false; //鼠標(biāo)釋放} 然后在將事件加入到這個div中即可，下面再來看一個在移動端需要做些什么，首先是事件不同，只需要在添加移動端的touchatart、touchmove、touchend就可以了，還有一個不同的時移動端獲取坐標(biāo)是event.touches[0].clientX和event.touches[0].clientY，這也很簡單，只要加上判斷就可以了，如果是PC端就使用event，如果是移動端就使用event.touches：
var touch ;if(event.touches){ touch = event.touches[0];}else { touch = event;}還有一點(diǎn)要注意，在移動端拖動div的時候移動端的頁面會自動產(chǎn)生滑動效果，所以還需要在touchmove的是給頁面添加一個阻止默認(rèn)事件的函數(shù)。
下面是整個代碼，可以在Chrome下模擬移動端測試，點(diǎn)擊這里查看：
<!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"; //阻止頁面的滑動默認(rèn)事件 document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } } //鼠標(biāo)釋放時候的函數(shù) 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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
