移动端的手势事件

功能:

元素跟着鼠标动

代码:

　　　　　　　　　　<style type="text/css">
			p{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
　　　　　　　　　<p>212313</p>

　　　　　　　　　　<script>

　　　　　　　　var startY,endY,startX,endLeft,endTop;
　　　　　　　　var p=document.getElementsByTagName('p')[0];
　　　　　　　　p.addEventListener('touchstart',function(e){//开始事件
　　　　　　　　startX=e.changedTouches[0].clientX;//获取开始的屏幕横坐标
　　　　　　　　startY=e.changedTouches[0].clientY;//获取开始的屏幕纵坐标
　　　　　　　　endLeft=parseInt(getComputedStyle(p).left);//获取元素当前的屏幕横坐标
　　　　　　　　endTop=parseInt(getComputedStyle(p).top);//获取元素当前的屏幕横坐标
　　　　　　　　})
　　　　　　　　p.addEventListener('touchmove',function(e){//移动过程
　　　　　　　　endX=e.changedTouches[0].clientX;//获取结束的屏幕横坐标
　　　　　　　　endY=e.changedTouches[0].clientY;//获取结束的屏幕纵坐标
　　　　　　　　p.style.left=endX-startX+endLeft+'px';//给元素left重新赋值,元素一定要定位
　　　　　　　　p.style.top=endY-startY+endTop+'px';
　　　　　　　　})

　　　　　　　　　　</script>

　　

转载于:https://www.cnblogs.com/LWJ-booke/p/7099201.html