<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="format-detection" content="telephone=no">
<title>移动div</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="testDiv" style="border: #51B21C 1px solid; z-index: 1000; width: 120px; height: 60px; position: absolute; left: 0px; top:100px"></div>
</body>
<script type="text/javascript">
var x_start,y_start,x_move,y_move,x_end,y_end,page_x,page_y;
//点击的时候
document.getElementById("testDiv").addEventListener('touchstart',function(e){
//获取手指的位置
x_start=e.touches[0].pageX;
y_start=e.touches[0].pageY;
//获取当前div在页面上的位置
page_x=$("#testDiv").css("left");
page_y=$("#testDiv").css("top");
});
//点击离开的时候
document.getElementById("testDiv").addEventListener('touchmove',function(e){
x_move=e.touches[0].pageX;
y_move=e.touches[0].pageY;
//设置left和top
var x=parseFloat(x_move)-parseFloat(x_start)+parseFloat(page_x);
if(x>=0){
var winW=$(window).width();
var width=$("#testDiv").width();
if(x>=(winW-width)){
x=winW-width;
}
$("#testDiv").css("left",x+"px");
}else{
$("#testDiv").css("left",0+"px");
}
var y=parseFloat(y_move)-parseFloat(y_start)+parseFloat(page_y);
if(y>=0){
var winH=$(window).height();
var height=$("#testDiv").height();
if(y>(winH-height)){
y=winH-height;
}
$("#testDiv").css("top",y+"px")
}else{
$("#testDiv").css("top",0+"px")
}
});
//end
document.getElementById("testDiv").addEventListener('touchend',function(e){
});
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
</script>
</html>
转载请注明原文地址: https://ju.6miu.com/read-500127.html
