快捷導(dǎo)航

js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動端的div拖動效果實(shí)例

更新時(shí)間：2016年12月09日 13:12:41 作者：cometwo

這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動端的div拖動效果實(shí)例，具有一定的參考價(jià)值，有需要的可以了解一下。

前段時(shí)間寫了一個(gè)簡單的div拖動效果，不料昨天項(xiàng)目上正好需要一個(gè)相差不多的需求，就正好用上了，但是在移動端的時(shí)候卻碰到了問題，拖動時(shí)候用到的三個(gè)事件：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)這個(gè)效果吧，先看一下效果：

PC端

移動端

先來分析一個(gè)拖動的流程，以PC端為例，首先是鼠標(biāo)按下（mousedown事件），然后移動（mousemove事件），最后釋放鼠標(biāo)（mouseup事件），首先要設(shè)置一個(gè)變量記錄鼠標(biāo)是否按下，在鼠標(biāo)按下的時(shí)候，我們做一個(gè)標(biāo)記，然后需要記錄一下鼠標(biāo)當(dāng)前的坐標(biāo)，還有這個(gè)div當(dāng)前的偏移量，當(dāng)鼠標(biāo)開始移動的時(shí)候，記錄下鼠標(biāo)當(dāng)前的坐標(biāo)，用鼠標(biāo)當(dāng)前的坐標(biāo)減去鼠標(biāo)按下時(shí)的坐標(biāo)再加上鼠標(biāo)按下時(shí)div的偏移量就是現(xiàn)在div距離父輩元素的距離，當(dāng)鼠標(biāo)釋放的時(shí)候?qū)?biāo)記改為鼠標(biāo)已經(jīng)釋放。

下面來看一下代碼：

var flag = false;    //是否按下鼠標(biāo)的標(biāo)記
var cur = {       //記錄鼠標(biāo)按下時(shí)的坐標(biāo)
  x:0,
  y:0
}
var nx,ny,dx,dy,x,y ;
//鼠標(biāo)按下時(shí)的函數(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)時(shí)的左偏移量
  dy = div2.offsetTop;   //記錄div的上偏移量
}
//鼠標(biāo)移動時(shí)的函數(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í)候的函數(shù)
function end(){
  flag = false;          //鼠標(biāo)釋放
}

然后在將事件加入到這個(gè)div中即可，下面再來看一個(gè)在移動端需要做些什么，首先是事件不同，只需要在添加移動端的touchatart、touchmove、touchend就可以了，還有一個(gè)不同的時(shí)移動端獲取坐標(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的時(shí)候移動端的頁面會自動產(chǎn)生滑動效果，所以還需要在touchmove的是給頁面添加一個(gè)阻止默認(rèn)事件的函數(shù)。

下面是整個(gè)代碼，可以在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í)候的函數(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: