原生js 实现移动端 元素页面拖拽

html

<div id="qmkf" >
       <div> 拖动</div>
 </div>

css

 #qmkf {
         border-radius: 50%; 
         position: fixed;
         z-index: 99;
         width: 39px;
         bottom: 25%; 
        left: 26px; 
      }

js


     window.onload = function () {
		    var oDiv = document.getElementById('qmkf'); 
		    var disX, moveX, L, T, starX, starY, starXEnd, starYEnd; 
		    oDiv.addEventListener('touchstart', function (e) { 
 
		        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.preventDefaul //禁止背景跟着滑动
              
		        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.clientWidth - this.offsetWidth) {
		            L = document.documentElement.clientWidth - this.offsetWidth;
		        }
		
		        if (T < 0) {
		            T = 0;
		        } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
		            T = document.documentElement.clientHeight - this.offsetHeight;
		        }
		        moveX = L + 'px';
		        moveY = T + 'px';
		        //console.log(moveX);
		        this.style.left = moveX;
		        this.style.top = moveY;
		    });
		}