DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現一個可以兼容PC端和移動端的div拖動效果實例
js實現一個可以兼容PC端和移動端的div拖動效果實例
編輯:關於JavaScript     

前段時間寫了一個簡單的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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved