DIV可以在手机页面中实现随意拖动

Posted 2022-03-13

代码实现如下：

 <style>     
            #my_divposition: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>