2020-08-10

移动端拖拽

说明

先为需要进行拖拽的元素添加相对于父元素的定位属性，之后调用封装好的元素即可，废话不多说，下面看事例。

html

 <img class="service" id="div1" src="./images/product-adv3.png" alt="">

css

  .service{      
	  width: 50px;      
	  height: 50px;      
	  position: absolute;      
	  left: 80%;      
	  top: 480px;      
	  z-index: 1000; 
}

js

//拖拽
function tDrag() {    
	var oDiv = document.getElementById('div1');
	var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
	oDiv.addEventListener('touchstart', function (e) {        
		//e.preventDefault();
		disX = e.touches[0].clientX - this.offsetLeft;        
		disY = e.touches[0].clientY - this.offsetTop;        
		starX = e.touches[0].clientX;       
		 starY = e.touches[0].clientY;    });    
		 oDiv.addEventListener('touchmove', function (e) {        
			 e.preventDefault()        
			 L = e.touches[0].clientX - disX;        
			 T = e.touches[0].clientY - disY;        
			 starXEnd = e.touches[0].clientX - starX;        
			 starYEnd = e.touches[0].clientY - starY;        
			 //console.log(L);        
			 if (L < 0) {            
			 L = 0;        
			 } else if (L > document.documentElement.scrollWidth - this.offsetWidth) 
			{            
			 L = document.documentElement.scrollWidth - this.offsetWidth;       
			  }
			 if (T < 0) {            
			 T = 0;       
			  } else if (T > document.documentElement.scrollHeight - this.offsetHeight) {            
			  T = document.documentElement.scrollHeight - this.offsetHeight;        
			  }        
			  moveX = L + 'px';        
			  moveY = T + 'px';        
			  //console.log(moveX);       
			   this.style.left = moveX;        
			   this.style.top = moveY;    
		 });	
	}

如果你觉得有用请为我点赞噢