代碼實現如下:
<style>
#my_div{position:fixed;display:block;top:0;}
</style>
<div id="my_div"></div>
<script type="text/javascript">
$(function(){
var cont=$("#my_div");
var contW=$("#my_div").width();
var contH=$("#my_div").height();
var startX,startY,sX,sY,moveX,moveY;
var winW=$(window).width();
var winH=$(window).height();
cont.on({ //綁定事件
touchstart:function(e){
startX = e.originalEvent.targetTouches[0].pageX; //獲取點擊點的X座標
startY = e.originalEvent.targetTouches[0].pageY; //獲取點擊點的Y座標
//console.log("startX="+startX+"************startY="+startY);
sX=$(this).offset().left;//相對於當前窗口X軸的偏移量
sY=$(this).offset().top;//相對於當前窗口Y軸的偏移量
//console.log("sX="+sX+"***************sY="+sY);
leftX=startX-sX;//鼠標所能移動的最左端是當前鼠標距div左邊距的位置
rightX=winW-contW+leftX;//鼠標所能移動的最右端是當前窗口距離減去鼠標距div最右端位置
topY=startY-sY;//鼠標所能移動最上端是當前鼠標距div上邊距的位置
bottomY=winH-contH+topY;//鼠標所能移動最下端是當前窗口距離減去鼠標距div最下端位置
},
touchmove:function(e){
e.preventDefault();
moveX=e.originalEvent.targetTouches[0].pageX;//移動過程中X軸的座標
moveY=e.originalEvent.targetTouches[0].pageY;//移動過程中Y軸的座標
//console.log("moveX="+moveX+"************moveY="+moveY);
if(moveX<leftX){moveX=leftX;}
if(moveX>rightX){moveX=rightX;}
if(moveY<topY){moveY=topY;}
if(moveY>bottomY){moveY=bottomY;}
$(this).css({
"left":moveX+sX-startX,
"top":moveY+sY-startY,
})
}
})
})
</script>