1.touchstart、touchmove、touchend可以实现拖动元素
    2.但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里的pageX和pageY
    3.移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动距离
    4.手指移动距离：手指滑动中的位置 - 手指刚开始触摸的位置

    拖动元素三步曲：
    （1）触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
    （2）移动手指touchmove：计算手指的滑动距离，平且移动盒子
    （3）离开手指touchend：
    注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault();

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>移动端拖动元素</title>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         body{
    14.             height: 1000px;
    15.         }
    16.         div{
    17.             width: 100px;
    18.             height: 100px;
    19.             background-color: pink;
    20.             position: relative;
    21.         }
    22.     </style>
    23. </head>
    24. <body>
    25.     <div></div>
    26.     <script>
    27.         var div = document.querySelector('div');
    28.         var startX = 0;//手指初始坐标
    29.         var startY = 0;
    30.         var x = 0;//盒子原来位置
    31.         var y = 0;
    32.         div.addEventListener('touchstart',function(e){
    33.             //手指初始坐标
    34.             startX = e.targetTouches[0].pageX;
    35.             startY = e.targetTouches[0].pageY;
    36.             //盒子原来位置
    37.             x = this.offsetLeft;
    38.             y = this.offsetTop;
    39.         });
    40.         div.addEventListener('touchmove',function(e){
    41.             //计算手指移动距离：手指滑动中的位置 - 手指刚开始触摸的位置
    42.             var moveX = e.targetTouches[0].pageX - startX;
    43.             var moveY = e.targetTouches[0].pageY - startY;
    44.             //移动盒子,盒子原来的位置 + 手指移动距离
    45.             this.style.left = x + moveX + 'px';
    46.             this.style.top = y + moveY + 'px';
    47.             //阻止默认的屏幕滚动e.preventDefault();
    48.             e.preventDefault();
    49.         });
    50.     </script>
    51. </body>
    52. </html>

    .