<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5拖拽</title>
<style>
div1{
width:100px;
height:100px;
background: #000000;
position: absolute;
left:0;
top:0;
}
</style>
<script>
window.addEventListener('DOMContentLoaded',function(){
var oDiv=document.getElementById('div1');
var x=0;
var y=0;
oDiv.addEventListener('touchstart',function(ev){
var disX=ev.targetTouches[0].pageX-x;
var disY=ev.targetTouches[0].pageY-y;
function fnMove(ev){
x=ev.targetTouches[0].pageX-disX;
y=ev.targetTouches[0].pageY-disY;
oDiv.style.left=x+'px';
oDiv.style.top=y+'px';
}
function fnEnd(){
document.removeEventListener('touchmove',fnMove,false);
document.removeEventListener('touchend',fnEnd,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
},false);
},false);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
网友评论