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

发布时间:2020-07-02 03:44:19 作者:高万耀
来源:网络 阅读:465

代码实现如下:


 <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>
推荐阅读:
  1. jquery如何实现div可以随意移动
  2. jquery 拖动div

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 在手 以在

上一篇:如何使用独立的putty终端程序连接HCL内的虚拟机

下一篇:.NET并行编程实践(一:.NET并行计算基本介绍、并行循环使用模式)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》