利用js實作div拖曳效果實例（相容PC端和行動端）-js教程-PHP中文網

利用js實作div拖曳效果實例（相容PC端和行動端）

怪我咯

發布： 2017-03-29 15:47:07

原創

1419 人瀏覽過

前段時間寫了一個簡單的p拖曳效果，不料昨天專案上正好需要一個相差不多的需求，就正好用上了，但是在行動端的時候卻碰到了問題，拖動時候用到的三個事件：mousedown、mousemove、mouseup在行動端都不起任何作用。畢竟行動端是沒有滑鼠的，查資料後發現，在行動端與之相對應的分別是：touchstart、touchmove、touchend事件。還有一點要注意的是在PC端取得目前滑鼠的座標是：event.clientX和event.clientY，在行動端取得座標位置則是：event.touches[0].clientX和event.touches[0]. clientY。

下面就來說說怎麼實現這個效果吧，先看一下效果：

PC端

利用js實作div拖曳效果實例（相容PC端和行動端）

行動機

#先來分析一個拖曳的流程，以PC端為例，首先是滑鼠按下（mousedown事件），然後移動（mousemove事件），最後釋放滑鼠（mouseup事件），首先要設定一個變數記錄滑鼠是否按下，在滑鼠按下的時候，我們做一個標記，然後需要記錄滑鼠目前的座標，還有這個p目前的偏移量，當滑鼠開始移動的時候，記錄下滑鼠目前的座標，用滑鼠目前的座標減去滑鼠按下時的座標再加上滑鼠按下時p的偏移量就是現在p距離父輩元素的距離，當滑鼠釋放的時候將標記改為滑鼠已經釋放。

下面來看程式碼：

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 = p2.offsetLeft;  //记录p当时的左偏移量
  dy = p2.offsetTop;   //记录p的上偏移量
}
//鼠标移动时的函数
function move(){
  if(flag){            //如果是鼠标按下则继续执行
    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
    x = dx+nx;          //p在x轴的偏移量加上鼠标在x轴移动的距离
    y = dy+ny;          //p在y轴的偏移量加上鼠标在y轴移动的距离
    p2.style.left = x+"px";
    p2.style.top = y +"px";
  }
}
//鼠标释放时候的函数
function end(){
  flag = false;          //鼠标释放
}

登入後複製

# 然後在將事件加入這個p中即可，下面再來看一個在行動端需要做些什麼，首先是事件不同，只需要在添加移動端的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;
}

登入後複製

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

下面是整個程式碼，可以在Chrome下模擬行動端測試，點擊這裡查看：

#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>适配移动端的拖动效果</title>
  <style>
    #p1{
      height: 1000px;
    }
    #p2{
      position: absolute;
      top:0;
      left:0;
      width: 100px;
      height: 100px;
      background: #bbbbbb;
    }
  </style>
</head>
<body>
<p id="p1">
  <p id="p2"></p>
</p>
<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 = p2.offsetLeft;
    dy = p2.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;
      p2.style.left = x+"px";
      p2.style.top = y +"px";
      //阻止页面的滑动默认事件
      document.addEventListener("touchmove",function(){
        event.preventDefault();
      },false);
    }
  }
  //鼠标释放时候的函数
  function end(){
    flag = false;
  }
  var p2 = document.getElementById("p2");
  p2.addEventListener("mousedown",function(){
    down();
  },false);
  p2.addEventListener("touchstart",function(){
    down();
  },false)
  p2.addEventListener("mousemove",function(){
    move();
  },false);
  p2.addEventListener("touchmove",function(){
    move();
  },false)
  document.body.addEventListener("mouseup",function(){
    end();
  },false);
  p2.addEventListener("touchend",function(){
    end();
  },false);
</script>
</body>
</html>

登入後複製

以上是利用js實作div拖曳效果實例（相容PC端和行動端）的詳細內容。更多資訊請關注PHP中文網其他相關文章！