移动端拖拽模型-CFANZ编程社区

模型演示如图：

移动端的拖拽制作原理和 PC 端思路是一样的。都是通过各自的API获取事件的位置，然后求差，通过绝对定位来改变元素的位置。

写前了解：移动端的三个事件touchstart touchmove touchend 分别对应移动端手指按下，移动，抬起。三个事件必须使用 DOM 二级添加监听。其中前两个事件对应的方法是event.touches[0].clientX。最后一个抬起对应的事件是 event.changedtouches[0].clientX。

实现思路：

手指按下移动通过event.touches[0].clientX 来取得手指的位置，两者之间的差，就作为元素的偏移位置。需要注意的是最后一步抬起的事件里面的内容。前面如果每次我们按下抬起就改变元素的位置，会发现元素已有的top 和 left 没有记住，总是给盒子偏移位置。最后一步就是用来记住，按下抬起时，元素的位置，下次按下移动加上偏移位置作为元素的位置。

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>移动端的拖拽事件</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <style>
        img {
            position: absolute;
            top: 100px;
            width: 50%;
            height: auto;
        }
    </style>
 </head>
 <body>
    <h3>监听状态：</h3><p>无动作</p>
        <img src="./images/0.jpg" alt="天安门">
        <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        var img = document.getElementsByTagName("img")[0];
        var lisp = document.getElementsByTagName("p")[0];
        var starX,starY,dtop = 100,dleft = 0,x,y;
        img.addEventListener("touchstart",function(event){
            starX = event.touches[0].clientX;
            starY = event.touches[0].clientY;
            lisp.innerHTML = "按下";
        },false);
        img.addEventListener("touchmove",function(event){
            lisp.innerHTML = "移动";
            x = event.touches[0].clientX - starX;
            y = event.touches[0].clientY - starY;
            img.style.top  = y + dtop + "px";
            img.style.left = x + dleft + "px";
        },false);
        img.addEventListener("touchend",function(){
            dtop += y;
            dleft += x;
            lisp.innerHTML = "抬起";
        },false);
    </script>
 </body>
 </html>

JQuery 版：

<body>
    <h3>监听状态：</h3><p>无动作</p>
        <img src="./images/0.jpg" alt="天安门">
        <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        var starX,starY,dtop = 100,dleft = 0,x,y;
        $("img").eq(0).on("touchstart",function(event){
            starX = event.touches[0].clientX;
            starY = event.touches[0].clientY;
            $("p").eq(0).html("按下");
        });
        $("img").eq(0).on("touchmove",function(event){
            x = event.touches[0].clientX - starX;
            y = event.touches[0].clientY - starY;
            $("img").eq(0).css("top",y + dtop + 'px');
            $("img").eq(0).css("left",x + dleft + 'px');
            $("p").eq(0).html("移动");
        });
        $("img").eq(0).on("touchend",function(event){
            $("p").eq(0).html("抬起");
            dtop += y;
            dleft += x;
        });
    </script>
 </body>