移动页面 和 pc 页面 拖拽方向

时间:2020-08-17 17:07:43   收藏:0   阅读:82
const containerDom = document.querySelector(‘#container‘)

containerDom.addEventListener(‘mousedown‘, function (ev){
	let dir=‘‘;

	let startX=ev.clientX;
	let startY=ev.clientY;

	function fnMove(ev){
	  if(dir==‘‘){
		//等待方向确定——用户超出5px
		const offsetX = ev.clientX - startX
		const offsetY = ev.offsetY - startY
		
		if(Math.abs(offsetX)>=5){
		    dir=‘x‘;
		    if (offsetX > 0) {
		 			  
		    } else {
		 			  
		    }
		}
		if(Math.abs(offsetY)>=5){
		    dir=‘y‘;
		  
		    if (offsetY > 0) {
		    			  
		    } else {
		  			  
		    }
		}
		
		
	  }
	 
	 
	
	}
	function fnEnd(){
	  containerDom.removeEventListener(‘mousemove‘, fnMove, false);
	  containerDom.removeEventListener(‘mouseup‘, fnEnd, false);
	}

	containerDom.addEventListener(‘mousemove‘, fnMove, false);
	containerDom.addEventListener(‘mouseup‘, fnEnd, false);
}, false);

containerDom.addEventListener(‘touchstart‘, function (ev){
	let dir=‘‘;

	let startX=ev.targetTouches[0].clientX;
	let startY=ev.targetTouches[0].clientY;

	function fnMove(ev){
	  if(dir==‘‘){
		//等待方向确定——用户超出5px
		
		const offsetX = ev.targetTouches[0].clientX-startX
		const offsetY = ev.targetTouches[0].clientY-startY
		if(Math.abs(offsetX)>=5){
		    dir=‘x‘;
		    if (offsetX > 0) {
		 			  
		    } else {
		 			  
		    }
		}
		if(Math.abs(offsetY)>=5){
		    dir=‘y‘;
		  
		    if (offsetY > 0) {
		    			  
		    } else {
		  			  
		    }
		}
	  }
	}
	function fnEnd(){
	  containerDom.removeEventListener(‘touchmove‘, fnMove, false);
	  containerDom.removeEventListener(‘touchend‘, fnEnd, false);
	}

	containerDom.addEventListener(‘touchmove‘, fnMove, false);
	containerDom.addEventListener(‘touchend‘, fnEnd, false);
}, false);

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!