PC端就是用鼠标操控而移动端就是用手操作下面这个就是移动端的点击和移动的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];
var startX,startY,moveX,moveY,distanceX,distanceY;
div.addEventListener('touchstart', function(e) {
//1、找到手指触摸时的初始坐标X,Y
//targetTouches: 位于该元素上的所有手指的列表
startX= e.targetTouches[0].clientX;
startY= e.targetTouches[0].clientY;
// console.log(startX+":"+startY);
})
div.addEventListener('touchmove', function(e) {
//2、手指滑动屏幕时的坐标X,Y
moveX= e.targetTouches[0].clientX;
moveY= e.targetTouches[0].clientY;
//3、将这两个X，Y分别进行相减
distanceX=moveX-startX;
distanceY=moveY-startY;
//4、设置div的位偏移
div.style.transform="translate("+distanceX+"px,"+distanceY+"px)";
})
div.addEventListener('touchend', function() {
})
</script>
</body>
</html>
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
