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

标签：offset   targe   listener   eve   dev   rdo   const   get   移动   

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);

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

标签：offset   targe   listener   eve   dev   rdo   const   get   移动   

原文地址：https://www.cnblogs.com/zhanglw456/p/13502553.html