html 移动端拖拽div,javascript实现移动端上的触屏拖拽功能

html部分

css部分

* {

margin: 0;

padding: 0;

}

html,body {

width: 100%;

height:100%;

}

#div1 {

width: 50px;

height: 50px;

background: cyan;

position: absolute;

}

说明：*通配符慎用，一般引用reset.css来清除需要清除的margin,padding。

初始效果如下

2.png

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.client