html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Document</title>
<style>
#box{position: fixed;left: 0;top: 0;width: 150px;height: 150px;background: #000;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var endTouchY = 0;
var endTouchX = 0;
box.addEventListener('touchstart',function(ev){
this.addEventListener('touchmove', function(ev){
ev.preventDefault();
var ev = ev.touches[0];
box.style.top = (ev.pageY-75)+'px';
box.style.left = (ev.pageX-75)+'px';
endTouchX = ev.pageX;
endTouchY = ev.pageY;
},false);
this.addEventListener('touchend', function(ev){
this.ontouchmove = null;
this.ontouchend = null;
var x = (endTouchX-75)>0?(endTouchX-75):0;
var y = (endTouchY-75)>0?(endTouchY-75):0;
x = (x>(winWidth-150))?(winWidth-150):x;
y = (y>(winHeight-150))?(winHeight-150):y;
box.style.left = x + 'px';
box.style.top = y + 'px';
},false);
},false);
</script>
</body>
</html>效果：
1888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
