码迷,mamicode.com
首页 > 移动开发 > 详细

移动端可拖拽悬浮窗+点击事件

时间:2017-07-28 23:40:08      阅读:1213      评论:0      收藏:0      [点我收藏+]

标签:pos   eve   har   var   offset   滑动方向   scala   body   his   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--设置viewport-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
</head>
<style>
.div{
width: 100px;
height: 50px;
position:fixed;
background-color: red;
border-radius:25px;
}
</style>
<body>
<div class="div" id="div"></div>
</body>
<script>

window.onload=function(){
var flag = 0; //标记是拖曳还是点击
var oDiv = document.getElementById(‘div‘);
var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;
oDiv.addEventListener(‘touchstart‘,function(e){
flag = 0;
e.preventDefault();//阻止触摸时页面的滚动,缩放
disX = e.touches[0].clientX - this.offsetLeft;
disY = e.touches[0].clientY - this.offsetTop;
//手指按下时的坐标
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
//console.log(disX);
});
oDiv.addEventListener(‘touchmove‘,function(e){
flag = 1;
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){//限制拖拽的X范围,不能拖出屏幕
L = 0;
}else if(L > document.documentElement.clientWidth - this.offsetWidth){
L=document.documentElement.clientWidth - this.offsetWidth;
}
if(T<0){//限制拖拽的Y范围,不能拖出屏幕
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;
});
window.addEventListener(‘touchend‘,function(e){
//alert(parseInt(moveX))
//判断滑动方向
if(flag === 0) {//点击
window.location.href=‘http://www.baidu.com‘;
}
});


}
</script>
</html>

移动端可拖拽悬浮窗+点击事件

标签:pos   eve   har   var   offset   滑动方向   scala   body   his   

原文地址:http://www.cnblogs.com/zhangjunming/p/7252697.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!