html 手机端拖拽效果,javascript实现移动端触屏拖拽功能,拖拽移动

HTML:

CSS:

* {

margin: 0;

padding: 0;

}

html,body {

width: 100%;

height:100%;

}

#div1 {

width: 50px;

height: 50px;

background: cyan;

position: absolute;

}

JS:

var div1=document.querySelector('#div1');

var maxW=document.body.clientWidth-div1.offsetWidth;

var maxH=document.body.clientHeight-div1.offsetHeight;

div1.addEventListener('touchstart',function(e){

var ev = e || window.event;

var touch = ev.targetTouches[0];

oL = touch.clientX - div1.offsetLeft;

oT = touch.clientY - div1.offsetTop;

document.addEventListener("touchmove",defaultEvent,false);

})

div1.addEventListener('touchmove',function(e){

var ev = e || window.event;

var touch = ev.targetTouches[0];

var oLeft = touch.clientX - oL;

var oTop = touch.clientY - oT;

if(oLeft<0){

oLeft=0;

}else if (oLeft>=maxW) {

oLeft=maxW;

}

if(oTop<0){

oTop=0;

}else if (oTop>=maxH) {

oTop=maxH;

}

div1.style.left = oLeft + 'px';

div1.style.top = oTop + 'px';

})

div1.addEventListener('touchend',function(){

document.removeEventListener("touchmove",defaultEvent);

})

function defaultEvent(e) {

e.preventDefault();

}

说明 :

maxW:div1可移动的最大宽度

maxH:div1可移动的最大高度

oL、oT:鼠标所点位置的坐标

效果:

本文来源于网络：查看 >https://blog.csdn.net/qq_39398332/article/details/81304503