- 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
2.移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
3.离开手指 touchend:
4.移动端拖动的效果案例
<!DOCTYPE html>
<html lang="CH-zn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端拖动元素</title>
<style type="text/css">
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<script type="text/javascript">
// 写在上面需要加wind 事件
window.addEventListener('load',function(){
// 1.获取元素
var div = document.querySelector('div');
// 定义初始化 手指的位置
var startX = 0;
var startY = 0 ;
var x = 0 ; // 盒子的原始位置
var y = 0 ; //
// 2.触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
div.addEventListener('touchstart',function(e){
startX = e.targetTouches[0].pageX ; // 得到第一个手机的 文档位置
startY = e.targetTouches[0].pageY ;
//同时获取盒子的位置
x = this.offsetLeft ; //得到盒子的边距
y = this.offsetTop ;
} )
// 3.手机点击 touchmove 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
div.addEventListener('touchmove',function(e){
// 计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX ;
var moveY = e.targetTouches[0].pageY - startY ;
// 移动我们的盒子 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX +'px';
this.style.top = y +moveY + 'px';
e.preventDefault(); // 阻止屏幕滚动的默认行为
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
