js實現一個能夠兼容PC端和移動端的div拖動效果

時間 2019-12-06

標籤實現一個能夠兼容移動端的 div 拖動效果欄目 JavaScript 简体版

原文原文鏈接

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

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

移動端 github

先來分析一個拖動的流程，以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：spa

var touch ;
if(event.touches){
    touch = event.touches[0];
}else {
    touch = event;
}

還有一點要注意，在移動端拖動div的時候移動端的頁面會自動產生滑動效果，因此還須要在touchmove的是給頁面添加一個阻止默認事件的函數。.net

下面是整個代碼，能夠在Chrome下模擬移動端測試，點擊這裏查看：code

<!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>