非常感谢原作者的分享,毕竟自己折腾了快一天还是有很多问题,感觉主要就卡在了事件对象的获取上和兼容性的问题;第一段代码是我自己的,在页面没有滚动条的情况下没问题,有滚动条时就出现Bug了;
//这个函数的目的是实现长按时才执行元素移动,我刚开始的逻辑是长按时移动悬浮球,点击时出现弹框
$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
timeout = setTimeout(fn, 800); //长按时间超过800ms,则执行传入的方法
}, false);
$this[i].addEventListener('touchend', function(event) {
clearTimeout(timeout); //长按时间少于800ms,不会执行传入的方法
}, false);
}
}
$("#moreDialog").longPress(function(){
console.log("长按了屏幕");
var deviceWidth = document.documentElement.clientWidth;
var deviceHeight = document.documentElement.clientHeight;
$("body").css({"overflow":"hidden"})
var drag = document.getElementById('moreDialog2'),
drag.addEventListener('touchmove', function(ev){
console.log(ev)
var ev = ev || window.event;//这里出现了问题。。
var _touch = ev.targetTouches[0];
var _x= _touch.pageX - 35;
var _y= _touch.pageY - 35;
console.log(_x,_y)
if(_x <= 0){
_x = 0;
}
if(_x >= (deviceWidth-70)){
_x = deviceWidth-70
}
if(_y <= 0){
_y = 0;
}
if(_y >= (deviceHeight-70)){
_y = deviceHeight-70
}
$("#moreDialog").css({
"left":_x + "px",
"top":_y + "px"
})
/* drag.style.top=(ev.pageY-35)+'px';
drag.style.left=(ev.pageX-35)+'px';
endTouchX = ev.pageX; */
},false)
drag.addEventListener('touchend', function(ev){
var deviceWidth = document.documentElement.clientWidth;
var deviceHeight = document.documentElement.clientHeight;
//window.event? window.event.cancelBubble = true : ev.stopPropagation();
$("body").css({"overflow":"auto"})
},false)
});
**
折腾了半天,效果不好,应该说就是失败了,还好找到了下面这位分享的代码解决燃眉之急,大家可以借鉴下:
**
<!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" />
<title>移动端元素移动模仿悬浮球效果</title>
</head>
<style>
body,html{
margin: 0;
padding: 0;
}
ol{
margin: 0;
}
.div {
width: 80px;
height: 80px;
position: fixed;
z-index: 2;
left: 78vw;
top:20vh;
background-color: rgb(129, 185, 231);
border-radius: 50%;
}
li{
line-height:30px;
}
#son{
width:40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -20px;
background: #fff;
opacity: 0.72;
border-radius: 50%;
}
</style>
<body>
<div style="background:#c7e2bf;">
<ol>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
<li>每天进步一点点</li>
</ol>
</div>
<div class="div" id="div">
<div id="son"></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;
console.log("touchstart",e)
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;
console.log("touchmove",e)
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;
});
oDiv.addEventListener("touchend", function (e) {
//alert(parseInt(moveX))
//判断滑动方向
console.log("touchend",e)
if (flag === 0) { //点击
console.log("点击")
//window.location.href = "http://www.baidu.com";
}
});
}
</script>
</html>
以上转载至码迷网;因个人的业务需求不尽相同,需要自己更改一下,我需要移动和点击两个功能,引入了jQuery mobile 的事件模块,
$("#moreDialog2").on("tap", function (e) {
console.log("点击了")
e.preventDefault();
//这里放点击时的业务逻辑
});