<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机移动端网站触屏可拖动悬浮球</title>
<style>#touch {
width: 60px;
height: 60px;
position: absolute;
left: 300px;
top: 79px;
margin-left: -30px;
margin-top: -30px;
z-index: 999999;
}
#simple-menu {
width: 60px;
height: 60px;
cursor: move;
}
</style>
</head>
<body>
<!-- 代码开始 -->
<div id="touch" class=" visible-xs-block" style="width: 200px; height: 200px; position: absolute;">
<img id="simple-menu" src="bg.jpg" style="width: 200px; height: 200px;" />
</div>
<script>
var div = document.getElementById('touch');
var viewWidth = window.screen.width;
var viewHeight = window.screen.height;
var divWidth = div.style.width;
var divHeight = div.style.height;
alert(viewWidth + "---" + viewHeight);
div.addEventListener('touchmove' ,function(event) {
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
console.log(touch.pageX + "---" + viewWidth + "," +touch.pageY + "---" +viewHeight);
var tempWidth = touch.pageX;
var tempHeigth = touch.pageY ;
if((touch.pageX + divWidth) > viewWidth){
tempWidth = viewWidth - divWidth;
}
if((touch.pageY + divHeight) > viewHeight){
tempHeigth = viewHeight - divHeight;
}
div.style.left = tempWidth + 'px';
div.style.top = tempHeigth + 'px';
div.style.background = "";
}
}, false);
</script>
</body>
</html>
- 1
- 2
前往页