<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
<style type="text/css">
.wrap {
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
</div>
<script type="text/javascript">
/* 触摸事件
三种基本触摸事件:
1. touchstart: 手指放在一个DOM元素上。
2.touchmove: 手指拖拽一个DOM元素。
3. youchend: 手指从一个DOM元素上移开。
每个触摸事件都会产生touches数组:
touches:当前位于屏幕上的所有手指的一个列表。我们做的是单指触摸的例子,所以直接用touches[0] */
// touch触摸事件
var wrap = document.querySelector(".wrap");
// 原生触屏事件
wrap.addEventListener("touchstart", function() {
// 获取手指对象 touches数组,保存触摸屏幕的手指
var finger = event.touches[0];
// 先取得手指的位置坐标
// var x1 = finger.pageX;
// var y1 = finger.pageY;
// clientX/clientY: 触摸点相对于浏览器窗口viewport的位置
// pageX/pageY:触摸点相对于页面的位置
// screenX/screenY: 触摸点相对于屏幕的位置
var x1 = finger.clientX;
var y1 = finger.clientY;
// 保存小div的初始位置
var l = wrap.offsetLeft;
var t = wrap.offsetTop;
wrap.addEventListener("touchmove", function() {
var f2 = event.touches[0];
// 新的手指位置
var x2 = f2.pageX;
var y2 = f2.pageY;
wrap.style.left = l + x2 - x1 + "px";
wrap.style.top = t + y2 - y1 + "px";
})
wrap.addEventListener("touchend", function() {
// 消除事件
// wrap.removeEventListener("touchmove");
})
})
</script>
</body>
</html>